Support for embedding links and references in text editor (#9003)

Signed-off-by: Victor Ilyushchenko <alt13ri@gmail.com>

packages/presentation/src/components/FilePreview.svelte

@@ -36,6 +36,7 @@
   export let metadata: BlobMetadata | undefined
   export let props: Record<string, any> = {}
   export let fit: boolean = false
+  export let embedded: boolean = false
 
   let download: HTMLAnchorElement
   let parentWidth: number
@@ -90,7 +91,8 @@
 
 <div
   use:resizeObserver={(element) => (parentWidth = element.clientWidth)}
-  class="content w-full h-full"
+  class:content-default={!embedded}
+  class:content-embedded={embedded}
   class:flex-center={fit && !audio}
   style:min-height={fit ? '0' : `${minHeight ?? 0}px`}
 >
@@ -122,9 +124,16 @@
 </div>
 
 <style lang="scss">
-  .content {
+  .content-default {
     flex-grow: 1;
     overflow: auto;
     border: none;
+    width: 100%;
+    height: 100%;
+  }
+
+  .content-embedded {
+    width: 100%;
+    border: none;
   }
 </style>

packages/presentation/src/components/NavLink.svelte

@@ -27,6 +27,7 @@
   export let accent: boolean = false
   export let noOverflow: boolean = false
   export let inlineReference: boolean = false
+  export let transparent: boolean = false
 
   function clickHandler (e: MouseEvent): void {
     if (disabled) return
@@ -74,6 +75,7 @@
     class:inline
     class:colorInherit
     class:antiMention={inlineReference}
+    class:transparent
     class:fs-bold={accent}
     style:flex-shrink={shrink}
     on:click={clickHandler}
@@ -88,6 +90,7 @@
     class:inline
     class:colorInherit
     class:antiMention={inlineReference}
+    class:transparent
     class:fs-bold={accent}
     style:flex-shrink={shrink}
     on:click={clickHandler}

packages/presentation/src/components/markup/ObjectNode.svelte

@@ -25,6 +25,7 @@
   export let _id: Ref<Doc> | undefined = undefined
   export let _class: Ref<Class<Doc>> | undefined = undefined
   export let title: string = ''
+  export let transparent: boolean = false
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
@@ -56,7 +57,7 @@
 </script>
 
 {#if !doc && title}
-  <span class="antiMention" class:broken on:click={onBrokenLinkClick}>
+  <span class="antiMention" class:transparent class:broken on:click={onBrokenLinkClick}>
     {#if icon}<Icon {icon} size="small" />{' '}{:else}@{/if}{title}
   </span>
 {:else if doc}
@@ -65,7 +66,8 @@
     showLoading={false}
     props={{
       object: doc,
-      title
+      title,
+      transparent
     }}
   />
 {/if}

packages/presentation/src/index.ts

@@ -52,6 +52,7 @@ export { default as DrawingBoard } from './components/DrawingBoard.svelte'
 export { default as DrawingBoardToolbar } from './components/DrawingBoardToolbar.svelte'
 export { default as Image } from './components/Image.svelte'
 export { default as IconWithEmoji } from './components/IconWithEmoji.svelte'
+export { default as ObjectNode } from './components/markup/ObjectNode.svelte'
 export { default } from './plugin'
 export * from './types'
 export * from './utils'