Update ReferenceInput layout (#1821)

packages/presentation/src/components/Members.svelte

@@ -18,7 +18,7 @@
   import login from '@anticrm/login'
   import { translate } from '@anticrm/platform'
   import setting from '@anticrm/setting'
-  import { IconAdd, Label, Scroller, SearchEdit, showPopup } from '@anticrm/ui'
+  import { IconAdd, Label, SearchEdit, showPopup } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation from '../plugin'
   import { getClient } from '../utils'
@@ -79,7 +79,6 @@
         <Label label={presentation.string.NoMatchesFound} />
       </div>
     {:else}
-      <Scroller>
       {#if isSearch}
         <div class="pr-8 pl-8"><Label label={presentation.string.InThis} params={{ space: spaceClass }} /></div>
         {#if !current.length}
@@ -115,7 +114,6 @@
           {/each}
         </div>
       {/if}
-      </Scroller>
     {/if}
   {/await}
   {#if withInviteWorkspaceButton}

packages/text-editor/lang/en.json

@@ -3,6 +3,14 @@
     "Suggested": "SUGGESTED",
     "NoItems": "No items",
     "EditorPlaceholder": "Start typing...",
-    "Edit": "Edit"
+    "Edit": "Edit",
+    "Bold": "Bold",
+    "Italic": "Italic",
+    "Strikethrough": "Strikethrough",
+    "OrderedList": "Ordered list",
+    "BulletedList": "Bulleted list",
+    "Blockquote": "Blockquote",
+    "Code": "Code",
+    "CodeBlock": "Code block"
   }
 }

packages/text-editor/lang/ru.json

@@ -3,6 +3,14 @@
     "Suggested": "РЕКОМЕНДУЕМЫЕ",
     "NoItems": "Нет содержимого",
     "EditorPlaceholder": "Начните печатать...",
-    "Edit": "Редактировать"
+    "Edit": "Редактировать",
+    "Bold": "Жирный",
+    "Italic": "Курсив",
+    "Strikethrough": "Зачеркнутый",
+    "OrderedList": "Упорядоченный список",
+    "BulletedList": "Маркированный список",
+    "Blockquote": "Цитата",
+    "Code": "Код",
+    "CodeBlock": "Кодовый блок"
   }
 }

packages/text-editor/src/components/ReferenceInput.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { Asset, getResource, IntlString } from '@anticrm/platform'
   import presentation, { getClient, ObjectSearchCategory } from '@anticrm/presentation'
-  import { AnySvelteComponent, Icon } from '@anticrm/ui'
+  import { AnySvelteComponent, Icon, Button, Tooltip } from '@anticrm/ui'
   import { AnyExtension } from '@tiptap/core'
   import { createEventDispatcher } from 'svelte'
   import { Completion } from '../Completion'
@@ -24,6 +24,12 @@
   import Attach from './icons/Attach.svelte'
   import Bold from './icons/Bold.svelte'
   import Italic from './icons/Italic.svelte'
+  import Strikethrough from './icons/Strikethrough.svelte'
+  import ListNumber from './icons/ListNumber.svelte'
+  import ListBullet from './icons/ListBullet.svelte'
+  import Quote from './icons/Quote.svelte'
+  import Code from './icons/Code.svelte'
+  import CodeBlock from './icons/CodeBlock.svelte'
   import Emoji from './icons/Emoji.svelte'
   import GIF from './icons/GIF.svelte'
   import Send from './icons/Send.svelte'
@@ -186,13 +192,34 @@
 
 <div class="ref-container">
   {#if isFormatting}
-    <div class="formatPanel" class:withoutTopBorder>
+    <div class="formatPanel buttons-group xsmall-gap" class:withoutTopBorder>
-      <div class="tool" class:active={isBold} on:click={toggleBold}>
+      <Tooltip label={textEditorPlugin.string.Bold}>
-        <Icon icon={Bold} size={'large'} />
+        <Button icon={Bold} kind={'transparent'} size={'small'} selected={isBold} on:click={toggleBold} />
-      </div>
+      </Tooltip>
-      <div class="tool" class:active={isItalic} on:click={toggleItalic}>
+      <Tooltip label={textEditorPlugin.string.Italic}>
-        <Icon icon={Italic} size={'large'} />
+        <Button icon={Italic} kind={'transparent'} size={'small'} selected={isItalic} on:click={toggleItalic} />
-      </div>
+      </Tooltip>
+      <Tooltip label={textEditorPlugin.string.Strikethrough}>
+        <Button icon={Strikethrough} kind={'transparent'} size={'small'} selected={undefined} on:click={() => {}} />
+      </Tooltip>
+      <div class="buttons-divider" />
+      <Tooltip label={textEditorPlugin.string.OrderedList}>
+        <Button icon={ListNumber} kind={'transparent'} size={'small'} selected={undefined} on:click={() => {}} />
+      </Tooltip>
+      <Tooltip label={textEditorPlugin.string.BulletedList}>
+        <Button icon={ListBullet} kind={'transparent'} size={'small'} selected={undefined} on:click={() => {}} />
+      </Tooltip>
+      <div class="buttons-divider" />
+      <Tooltip label={textEditorPlugin.string.Blockquote}>
+        <Button icon={Quote} kind={'transparent'} size={'small'} selected={undefined} on:click={() => {}} />
+      </Tooltip>
+      <div class="buttons-divider" />
+      <Tooltip label={textEditorPlugin.string.Code}>
+        <Button icon={Code} kind={'transparent'} size={'small'} selected={undefined} on:click={() => {}} />
+      </Tooltip>
+      <Tooltip label={textEditorPlugin.string.CodeBlock}>
+        <Button icon={CodeBlock} kind={'transparent'} size={'small'} selected={undefined} on:click={() => {}} />
+      </Tooltip>
     </div>
   {/if}
   <div class="textInput" class:withoutTopBorder={withoutTopBorder || isFormatting}>
@@ -229,17 +256,17 @@
     min-height: 4.5rem;
 
     .formatPanel {
-      display: flex;
+      padding: 0.5rem;
-      padding: 0.625rem 0.5rem;
+      background-color: var(--body-accent);
-      background-color: var(--theme-bg-accent-color);
+      border: 1px solid var(--divider-color);
-      border: 1px solid var(--theme-bg-accent-color);
+      border-radius: 0.75rem 0.75rem 0 0;
-      border-top-left-radius: 0.75rem;
-      border-top-right-radius: 0.75rem;
       border-bottom: 0;
 
       &.withoutTopBorder {
-        border-top-left-radius: 0;
+        border-radius: 0;
-        border-top-right-radius: 0;
+      }
+      & + .textInput {
+        border-top: none;
       }
     }
 
@@ -249,8 +276,8 @@
       align-items: flex-end;
       min-height: 2.75rem;
       padding: 0.75rem 1rem;
-      background-color: var(--theme-bg-accent-color);
+      background-color: var(--accent-bg-color);
-      border: 1px solid var(--theme-bg-accent-color);
+      border: 1px solid var(--divider-color);
       border-radius: 0.75rem;
 
       &.withoutTopBorder {
@@ -345,9 +372,9 @@
       color: var(--theme-content-dark-color);
       cursor: pointer;
 
-      &.active {
+      // &.active {
-        color: var(--theme-caption-color);
+      //   color: var(--theme-caption-color);
-      }
+      // }
 
       &:hover {
         color: var(--theme-caption-color);

packages/text-editor/src/components/icons/Bold.svelte

@@ -3,11 +3,8 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M17.7,6c-0.2-1.1-0.6-1.9-1.2-2.4c-0.6-0.6-1.4-1-2.4-1.2C13,2.1,11.8,2,10,2C8.2,2,7,2.1,6,2.3C4.9,2.6,4.1,2.9,3.5,3.5 C2.9,4.1,2.6,4.9,2.3,6C2.1,7,2,8.2,2,10c0,1.8,0.1,3,0.3,4c0.2,1.1,0.6,1.9,1.2,2.4c0.6,0.6,1.4,1,2.4,1.2c1,0.2,2.3,0.3,4,0.3 c1.8,0,3-0.1,4-0.3c1.1-0.2,1.9-0.6,2.4-1.2c0.6-0.6,1-1.4,1.2-2.4c0.2-1,0.3-2.3,0.3-4C18,8.2,17.9,7,17.7,6z M16.7,13.8 c-0.2,0.9-0.5,1.5-0.9,2c-0.4,0.4-1.1,0.7-2,0.9C12.9,16.9,11.7,17,10,17s-2.9-0.1-3.8-0.3c-0.9-0.2-1.5-0.5-2-0.9 c-0.4-0.4-0.7-1.1-0.9-2C3.1,12.9,3,11.7,3,10s0.1-2.9,0.3-3.8c0.2-0.9,0.5-1.5,0.9-2c0.4-0.4,1.1-0.7,2-0.9C7.1,3.1,8.3,3,10,3 s2.9,0.1,3.8,0.3c0.9,0.2,1.5,0.5,2,0.9c0.4,0.4,0.7,1.1,0.9,2C16.9,7.1,17,8.3,17,10S16.9,12.9,16.7,13.8z"
+    d="M15.6,11.5c1.3-1.1,2.1-2.7,2.1-4.5c0-3.2-2.6-5.8-5.7-5.8H5.5C5.1,1.2,4.8,1.6,4.8,2v10v10 c0,0.4,0.3,0.8,0.8,0.8H14c3.2,0,5.7-2.6,5.7-5.8C19.8,14.4,18,12.2,15.6,11.5z M6.2,2.8H12c2.3,0,4.2,1.9,4.2,4.2s-1.9,4.2-4.2,4.2 H6.2V2.8z M14,21.2H6.2v-8.5H12h2c2.3,0,4.2,1.9,4.2,4.2S16.4,21.2,14,21.2z"
-  />
-  <path
-    d="M11.2,6.2H8.7c-0.9,0-1.2,0.2-1.2,1.2v5.3c0,1,0.3,1.2,1.2,1.2h2.5c0.5,0,1-0.2,1.3-0.6c0.4-0.4,0.6-1,0.6-1.6 c0-0.7-0.3-1.3-0.7-1.7c0.4-0.4,0.7-0.9,0.7-1.7C13.2,7,12.2,6.2,11.2,6.2z M11.8,12.6c-0.2,0.2-0.4,0.3-0.6,0.3H8.7 c-0.1,0-0.1,0-0.2,0c0-0.1,0-0.1,0-0.2v-2.2h2.7c0.4,0,0.9,0.4,0.9,1.2C12.2,12,12.1,12.3,11.8,12.6z M11.2,9.5H8.5V7.3 c0-0.1,0-0.1,0-0.2c0.1,0,0.1,0,0.2,0h2.5c0.5,0,0.9,0.4,0.9,1.2S11.7,9.5,11.2,9.5z"
   />
 </svg>

packages/text-editor/src/components/icons/Code.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8.5,6C8.2,5.7,7.7,5.7,7.5,6l-6,6.2c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.2,0.1,0.4,0.2,0.5l6,5.8 c0.3,0.3,0.8,0.3,1.1,0s0.3-0.8,0-1.1l-5.5-5.3L8.5,7C8.8,6.7,8.8,6.2,8.5,6z"
+  />
+  <path
+    d="M22.5,12.2l-6-6.2c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l5.5,5.7L15.5,18c-0.3,0.3-0.3,0.8,0,1.1 c0.3,0.3,0.8,0.3,1.1,0l6-5.8c0.1-0.1,0.2-0.3,0.2-0.5C22.8,12.5,22.7,12.3,22.5,12.2z"
+  />
+  <path
+    d="M14.1,1.3c-0.4-0.1-0.8,0.2-0.9,0.6l-3.5,20c-0.1,0.4,0.2,0.8,0.6,0.9c0.4,0.1,0.8-0.2,0.9-0.6l3.5-20 C14.8,1.7,14.5,1.3,14.1,1.3z"
+  />
+</svg>

packages/text-editor/src/components/icons/CodeBlock.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M4,21.7c-1,0-1.7-0.8-1.7-1.8l0-7c0-0.4,0.3-0.8,0.8-0.8s0.7,0.3,0.7,0.8l0,7c0,0.1,0.1,0.2,0.2,0.2l16,0 c0.1,0,0.2-0.1,0.2-0.2l0-16c0-0.1-0.1-0.3-0.2-0.3l-7,0c-0.4,0-0.8-0.3-0.8-0.8s0.3-0.7,0.8-0.7l7,0c1,0,1.8,0.8,1.7,1.8l0,16 c0,1-0.8,1.8-1.8,1.7L4,21.7z"
+  />
+  <path
+    d="M3.5,7.9L6,5.3C6.1,5.1,6.2,5,6.2,4.8c0-0.2-0.1-0.3-0.2-0.4C5.9,4.3,5.7,4.2,5.6,4.2c-0.2,0-0.3,0.1-0.4,0.2L2.2,7.4 C2.1,7.6,2,7.7,2,7.9c0,0.2,0.1,0.3,0.2,0.4l2.9,2.8c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.3,0.2-0.4 S6.1,10.4,6,10.3L3.5,7.9z"
+  />
+  <path
+    d="M13.9,7.4l-2.9-3.1c-0.1-0.1-0.3-0.2-0.4-0.2c-0.2,0-0.3,0.1-0.4,0.2C9.9,4.5,9.9,4.7,9.9,4.8C9.9,5,9.9,5.1,10,5.3l2.5,2.6 l-2.5,2.4c-0.2,0.2-0.3,0.6,0,0.9c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.4-0.2l2.9-2.8c0.1-0.1,0.2-0.3,0.2-0.4 C14.1,7.7,14,7.6,13.9,7.4z"
+  />
+  <path
+    d="M9,2c0,0-0.1,0-0.1,0C8.6,2,8.3,2.2,8.3,2.5l-1.7,9.8C6.5,12.7,6.7,13,7.1,13c0,0,0.1,0,0.1,0c0.3,0,0.6-0.2,0.6-0.5 l1.7-9.8C9.6,2.4,9.3,2.1,9,2z"
+  />
+</svg>

packages/text-editor/src/components/icons/Italic.svelte

@@ -3,11 +3,8 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M17.7,6c-0.2-1.1-0.6-1.9-1.2-2.4c-0.6-0.6-1.4-1-2.4-1.2C13,2.1,11.8,2,10,2C8.2,2,7,2.1,6,2.3C4.9,2.6,4.1,2.9,3.5,3.5 C2.9,4.1,2.6,4.9,2.3,6C2.1,7,2,8.2,2,10c0,1.8,0.1,3,0.3,4c0.2,1.1,0.6,1.9,1.2,2.4c0.6,0.6,1.4,1,2.4,1.2c1,0.2,2.3,0.3,4,0.3 c1.8,0,3-0.1,4-0.3c1.1-0.2,1.9-0.6,2.4-1.2c0.6-0.6,1-1.4,1.2-2.4c0.2-1,0.3-2.3,0.3-4C18,8.2,17.9,7,17.7,6z M16.7,13.8 c-0.2,0.9-0.5,1.5-0.9,2c-0.4,0.4-1.1,0.7-2,0.9C12.9,16.9,11.7,17,10,17s-2.9-0.1-3.8-0.3c-0.9-0.2-1.5-0.5-2-0.9 c-0.4-0.4-0.7-1.1-0.9-2C3.1,12.9,3,11.7,3,10s0.1-2.9,0.3-3.8c0.2-0.9,0.5-1.5,0.9-2c0.4-0.4,1.1-0.7,2-0.9C7.1,3.1,8.3,3,10,3 s2.9,0.1,3.8,0.3c0.9,0.2,1.5,0.5,2,0.9c0.4,0.4,0.7,1.1,0.9,2C16.9,7.1,17,8.3,17,10S16.9,12.9,16.7,13.8z"
+    d="M18,2.2h-3.3c-0.1,0-0.2,0-0.3,0H10C9.6,2.2,9.2,2.6,9.2,3S9.6,3.8,10,3.8h3.5L8.9,20.2H6 c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h8c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8h-3.5l4.6-16.5H18c0.4,0,0.8-0.3,0.8-0.8 S18.4,2.2,18,2.2z"
-  />
-  <path
-    d="M12,7.2c0.3,0,0.5-0.2,0.5-0.5S12.3,6.2,12,6.2h-1.7c0,0,0,0,0,0H8c-0.3,0-0.5,0.2-0.5,0.5S7.7,7.2,8,7.2h1.8l-0.6,5.7H8 c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h4c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-1.8l0.6-5.7H12z"
   />
 </svg>

packages/text-editor/src/components/icons/ListBullet.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M4.5,16.2c-1.5,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c1.5,0,2.8-1.2,2.8-2.8S6,16.2,4.5,16.2z M4.5,20.2 c-0.7,0-1.2-0.6-1.2-1.2s0.6-1.2,1.2-1.2s1.2,0.6,1.2,1.2S5.2,20.2,4.5,20.2z"
+  />
+  <path
+    d="M4.5,2.2C3,2.2,1.8,3.5,1.8,5S3,7.8,4.5,7.8C6,7.8,7.2,6.5,7.2,5C7.2,3.5,6,2.2,4.5,2.2z M4.5,6.2 C3.8,6.2,3.2,5.7,3.2,5s0.6-1.2,1.2-1.2S5.8,4.3,5.8,5S5.2,6.2,4.5,6.2z"
+  />
+  <path
+    d="M4.5,9.2C3,9.2,1.8,10.5,1.8,12s1.2,2.8,2.8,2.8c1.5,0,2.8-1.2,2.8-2.8S6,9.2,4.5,9.2z M4.5,13.2 c-0.7,0-1.2-0.6-1.2-1.2s0.6-1.2,1.2-1.2s1.2,0.6,1.2,1.2S5.2,13.2,4.5,13.2z"
+  />
+  <path d="M21.5,11.2h-11c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h11c0.4,0,0.8-0.3,0.8-0.8S21.9,11.2,21.5,11.2z" />
+  <path d="M21.5,18.2h-11c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h11c0.4,0,0.8-0.3,0.8-0.8S21.9,18.2,21.5,18.2z" />
+  <path d="M10.5,5.8h11c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8h-11c-0.4,0-0.8,0.3-0.8,0.8S10.1,5.8,10.5,5.8z" />
+</svg>

packages/text-editor/src/components/icons/ListNumber.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.8,12c0-0.4,0.3-0.8,0.8-0.8h11c0.4,0,0.8,0.3,0.8,0.8s-0.3,0.8-0.8,0.8h-11C10.1,12.8,9.8,12.4,9.8,12z" />
+  <path d="M9.8,19c0-0.4,0.3-0.8,0.8-0.8h11c0.4,0,0.8,0.3,0.8,0.8s-0.3,0.8-0.8,0.8h-11C10.1,19.8,9.8,19.4,9.8,19z" />
+  <path d="M9.8,5c0-0.4,0.3-0.8,0.8-0.8h11c0.4,0,0.8,0.3,0.8,0.8s-0.3,0.8-0.8,0.8h-11C10.1,5.8,9.8,5.4,9.8,5z" />
+  <polygon points="4.5,3.8 4.5,8.5 3,8.5 3,9.7 7.7,9.7 7.7,8.5 6.2,8.5 6.2,2.1 4.9,2.1 2.2,3.7 2.9,4.9 " />
+  <path
+    d="M4.8,20.4c0.5-0.4,0.9-0.8,1.3-1.2c0.3-0.3,0.7-0.7,0.9-1.1s0.5-0.7,0.7-1.1s0.1-0.7,0.1-1.1c0-0.8-0.3-1.3-0.8-1.6 S5.9,14,4.9,14c-0.8,0-1.6,0.1-2.4,0.5v2h1.1l0.1-0.9h0.1c0.1,0,0.3,0,0.4-0.1c0.1,0,0.3,0,0.5,0c0.4,0,0.7,0.1,0.9,0.3 c0.3,0.1,0.4,0.4,0.4,0.8c0,0.3,0,0.4-0.1,0.7c-0.1,0.3-0.3,0.4-0.4,0.7c-0.1,0.3-0.4,0.4-0.8,0.8c-0.4,0.3-0.7,0.7-0.9,0.8 c-0.3,0.3-0.7,0.5-1.3,1.1v1.3H8v-1.3H4.8V20.4z"
+  />
+</svg>

packages/text-editor/src/components/icons/Quote.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.1,4.7C9.9,4.4,9.7,4.4,9.4,4.6C5.7,7,3.6,9.8,3.2,13c-0.7,5,3.8,7.4,6.1,5.2c2.3-2.2,0.9-5-0.7-5.8 C6.9,11.7,5.9,12,6,11c0.2-1,2.5-3.8,4.6-5.2c0.1-0.1,0.2-0.3,0.1-0.5C10.6,5.2,10.4,5,10.1,4.7z"
+  />
+  <path
+    d="M20.5,5.8c0.1-0.1,0.2-0.3,0.1-0.5c-0.1-0.1-0.3-0.3-0.5-0.7c-0.2-0.3-0.4-0.3-0.7-0.1C15.6,7,13.5,9.8,13.1,13 c-0.7,5,3.8,7.4,6.1,5.2c2.3-2.2,0.9-5-0.7-5.8c-1.6-0.8-2.6-0.5-2.5-1.5C16.1,10,18.5,7.1,20.5,5.8z"
+  />
+</svg>

packages/text-editor/src/components/icons/Strikethrough.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="17.3,6.3 17.3,6.3 17.3,6.3" />
+  <polygon points="17.3,6.3 17.3,6.3 17.3,6.3" />
+  <path
+    d="M8.2,9.6c0.3-0.2,0.4-0.7,0.2-1C7.5,7.2,7.5,5.7,8.1,4.7C8.7,3.6,10,2.8,12,2.8c2,0,3.3,0.9,4.1,1.8 C16.6,5,16.9,5.4,17,5.7c0.1,0.2,0.2,0.3,0.2,0.4c0,0,0,0.1,0,0.1c0,0,0,0,0,0c0,0,0,0,0,0v0l0,0c0.1,0.4,0.6,0.6,1,0.4 c0.4-0.1,0.6-0.6,0.4-1l-0.6,0.2c0.6-0.2,0.6-0.2,0.6-0.2c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0-0.1-0.1-0.2c-0.1-0.1-0.1-0.3-0.3-0.5c-0.2-0.4-0.6-1-1.1-1.5c-1-1.1-2.7-2.2-5.2-2.2c-2.5,0-4.3,1.1-5.2,2.7 C5.9,5.6,6,7.6,7.2,9.4C7.4,9.8,7.9,9.9,8.2,9.6z"
+  />
+  <path
+    d="M21.5,11.2h-19c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h9.4c2,0.8,3.2,1.8,3.8,2.8c0,0.1,0.1,0.1,0.1,0.2 c0.4,0.8,0.5,1.6,0.4,2.3c-0.3,1.8-2,3.3-4.1,3.3c-3.5,0-5.3-3.6-5.3-3.6c0,0,0,0,0-0.1c0,0-0.1-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1 c0,0-0.1-0.1-0.1-0.1c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0 c0,0-0.1,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1c0,0.1,0,0.1,0,0.2c0,0,0,0,0,0.1 l0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0.1,0.1,0.2 c0,0.1,0.1,0.3,0.2,0.5c0.2,0.4,0.5,1,1,1.6c1,1.2,2.7,2.3,5.4,2.3c2.2,0,4.2-1.1,5.1-2.9c0.7-1.3,0.8-2.7,0.3-4.1 c-0.1-0.2-0.1-0.4-0.2-0.5c0,0,0-0.1-0.1-0.1c-0.1-0.2-0.2-0.3-0.3-0.5c0,0,0-0.1-0.1-0.1c0,0,0,0,0,0c-0.4-0.6-1-1.3-1.8-1.8h6.5 c0.4,0,0.8-0.3,0.8-0.8S21.9,11.2,21.5,11.2z"
+  />
+</svg>

packages/text-editor/src/plugin.ts

@@ -35,6 +35,14 @@ export default plugin(textEditorId, {
     Emoji: '' as IntlString,
     GIF: '' as IntlString,
     EditorPlaceholder: '' as IntlString,
-    Edit: '' as IntlString
+    Edit: '' as IntlString,
+    Bold: '' as IntlString,
+    Italic: '' as IntlString,
+    Strikethrough: '' as IntlString,
+    OrderedList: '' as IntlString,
+    BulletedList: '' as IntlString,
+    Blockquote: '' as IntlString,
+    Code: '' as IntlString,
+    CodeBlock: '' as IntlString
   }
 })

packages/ui/src/components/Button.svelte

@@ -110,7 +110,7 @@
       class:mr-2={!iconOnly && kind !== 'no-border' && shape !== 'circle'}
       class:resetIconSize
     >
-      <Icon {icon} size={'small'} />
+      <Icon bind:icon size={'small'} />
     </div>
   {/if}
   {#if loading}

packages/ui/src/components/Panel.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { Button, IconClose, IconDetails, IconExpand } from '..'
+  import { Button, IconClose, IconDetails, IconScale, IconScaleFull } from '..'
 
   export let innerWidth: number = 0
   export let panelWidth: number = 0
@@ -33,8 +33,9 @@
   }
   let docWidth: number
   let fullSize: boolean = false
-  $: if (docWidth <= 900 && !fullSize) fullSize = true
+  let docSize: boolean = false
-  $: if (docWidth > 900 && fullSize) fullSize = false
+  $: if (docWidth <= 900 && !docSize) docSize = true
+  $: if (docWidth > 900 && docSize) docSize = false
 </script>
 
 <svelte:window bind:innerWidth={docWidth} />
@@ -65,7 +66,7 @@
       {/if}
       {#if isFullSize}
         <Button
-          icon={IconExpand}
+          icon={fullSize || docWidth <= 900 ? IconScale : IconScaleFull}
           kind={'transparent'}
           size={'medium'}
           selected={fullSize}

packages/ui/src/components/icons/Scale.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M21.7,3c0-0.1,0-0.2-0.1-0.3c-0.1-0.2-0.2-0.3-0.4-0.4c-0.1,0-0.2-0.1-0.3-0.1h-6c-0.4,0-0.8,0.3-0.8,0.8 s0.3,0.8,0.8,0.8h4.2l-8.9,8.9V8.5c0-0.4-0.3-0.8-0.8-0.8S8.8,8.1,8.8,8.5v6c0,0.1,0,0.2,0.1,0.3C8.9,15,9,15.1,9.2,15.2 c0.1,0,0.2,0.1,0.3,0.1c0,0,0,0,0,0h6c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8h-4.2l8.9-8.9V9c0,0.4,0.3,0.8,0.8,0.8 s0.8-0.3,0.8-0.8L21.7,3C21.8,3,21.7,3,21.7,3z"
+  />
+  <path
+    d="M21,12.2c-0.4,0-0.8,0.3-0.8,0.8v7c0,0.1-0.1,0.2-0.2,0.2H4c-0.1,0-0.2-0.1-0.2-0.2V4c0-0.1,0.1-0.2,0.2-0.2h7 c0.4,0,0.8-0.3,0.8-0.8S11.4,2.2,11,2.2H4C3,2.2,2.2,3,2.2,4v16c0,1,0.8,1.8,1.8,1.8h16c1,0,1.8-0.8,1.8-1.8v-7 C21.8,12.6,21.4,12.2,21,12.2z"
+  />
+</svg>

packages/ui/src/components/icons/ScaleFull.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M21,2.2h-7c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h5.2l-6.8,6.8c-0.3,0.3-0.3,0.8,0,1.1s0.8,0.3,1.1,0 l6.8-6.8V10c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V3C21.8,2.6,21.4,2.2,21,2.2z"
+  />
+  <path
+    d="M21,14c-0.4,0-0.8,0.3-0.8,0.8v4.8c0,0.4-0.3,0.8-0.8,0.8h-15c-0.4,0-0.8-0.3-0.8-0.8v-15 c0-0.4,0.3-0.8,0.8-0.8H9c0.4,0,0.8-0.3,0.8-0.8S9.4,2.2,9,2.2H4.5c-1.2,0-2.2,1-2.2,2.2v15c0,1.2,1,2.2,2.2,2.2h15 c1.2,0,2.2-1,2.2-2.2v-4.8C21.8,14.3,21.4,14,21,14z"
+  />
+</svg>

packages/ui/src/index.ts

@@ -125,6 +125,8 @@ export { default as IconDPCalendar } from './components/calendar/icons/DPCalenda
 export { default as IconDPCalendarOver } from './components/calendar/icons/DPCalendarOver.svelte'
 export { default as IconOptions } from './components/icons/Options.svelte'
 export { default as IconDetails } from './components/icons/Details.svelte'
+export { default as IconScale } from './components/icons/Scale.svelte'
+export { default as IconScaleFull } from './components/icons/ScaleFull.svelte'
 
 export { default as PanelInstance } from './components/PanelInstance.svelte'
 export { default as Panel } from './components/Panel.svelte'