@onereach/ui-components 10.2.0 → 10.2.1-beta.4272.0

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.vue

@@ -16,53 +16,22 @@
       </OrLabel>
     </template>
     <div
-      :ref="'containerRef'"
+      ref="containerRef"
       :class="containerStyles"
       :invalid="!!error"
       @click="handleEditorClick()"
     >
-      <div
-        :ref="'toolbarRef'"
-        :class="toolbarContainerStyles"
-      >
-        <div
-          v-for="(tools, index) in toolbar"
-          :key="index"
-          :class="[...toolbarStyles, { 'hidden': isVisible(tools)}]"
-        >
-          <div
-            v-for="item in tools"
-            :key="item"
-            :class="['flex gap-md', { 'hidden': !isVisible(item)}]"
-          >
-            <or-icon-button
-              v-if="item==='heading'"
-              :ref="'toolbarButtonRef'"
-              :selected="isActive[item]"
-              :disabled="!isFocused"
-              :tooltip="{content: item, placement: 'top'}"
-              :icon="{icon: headingIcon, variant: 'inherit'}"
-              @click="menuRef && menuRef.toggle()"
-            />
-            <or-icon-button
-              v-else-if="isVisible(item)"
-              :tooltip="{content: iconTooltipsEnum[item], placement: 'top'}"
-              :selected="isActive[item]"
-              :disabled="!isFocused"
-              :icon="{icon: iconsEnum[item], variant: 'inherit'}"
-              @click="handleToolbarClick(item)"
-            />
-          </div>
-        </div>
-        <or-icon-button
-          v-if="countOfNotVisibleTools > 0"
-          :ref="'moreButtonRef'"
-          :disabled="!isFocused"
-          :icon="{icon: 'more_horiz', variant: 'inherit'}"
-          class="px-sm"
-          @click="moreRef && moreRef.open()"
-        />
-      </div>
+      <editor-toolbar
+        v-if="!readonly"
+        ref="toolbarContainerRef"
+        :count-of-not-visible-tools="countOfNotVisibleTools"
+        :toolbar="toolbar"
+        :is-focused="isFocused"
+        :active-heading-level="activeHeadingLevel"
+        :is-active="isActive"
+        :heading-levels="headingLevels"
+        @click-tool="handleToolbarClick"
+      />
       <div :class="['p-sm', 'overflow-auto', 'min-h-[88px]']">
         <textarea
           v-show="disableMarkdown"
@@ -74,7 +43,7 @@
         />
         <div
           v-show="!disableMarkdown"
-          :ref="'editorRef'"
+          ref="editorRef"
           :class="editorInputStyles"
         />
         <slot name="files" />
@@ -95,44 +64,6 @@
         {{ error }}
       </OrError>
     </template>
-    <or-popover
-      v-if="moreButtonRef"
-      :ref="'moreRef'"
-      :trigger="moreButtonRef && moreButtonRef.root"
-      placement="top-end"
-    >
-      <div class="flex p-sm gap-md">
-        <or-icon-button
-          v-for="item in notVisibleTools"
-          :key="item"
-          :tooltip="{content: iconTooltipsEnum[item], placement: 'top'}"
-          :selected="isActive[item]"
-          :icon="{icon: iconsEnum[item], variant: 'inherit'}"
-          @click="handleToolbarClick(item)"
-        />
-      </div>
-    </or-popover>
-    <or-menu
-      v-if="toolbarButtonRef"
-      :ref="'menuRef'"
-      :trigger="toolbarButtonRef[getIndexOfHeading] && toolbarButtonRef[getIndexOfHeading].root"
-      placement="bottom-start"
-    >
-      <or-menu-item
-        v-for="heading in headingLevels"
-        :key="heading"
-        :selected="activeHeadingLevel === heading"
-        @click="handleToolbarClick('heading', heading)"
-      >
-        Heading {{ heading }}
-      </or-menu-item>
-      <or-menu-item
-        :selected="!activeHeadingLevel"
-        @click="handleToolbarClick('heading')"
-      >
-        None
-      </or-menu-item>
-    </or-menu>
     <or-modal
       :is-open="isOpenLinkModal"
       size="s"
@@ -184,24 +115,19 @@ import { UseFocusTrapReturn, useFocusTrap } from '@vueuse/integrations/useFocusT
 import { ComponentPublicInstance, PropType, computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue-demi';
 import { deserialize, serialize } from './utils/markdown';
 
+import EditorToolbar from './partials/EditorToolbar.vue';
+
 import { OrButtonV3 as OrButton } from '../or-button-v3';
-import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrInputV3 as OrInput } from '../or-input-v3';
-import { OrLabelV3 as OrLabel } from '../or-label-v3';
-import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
-import { OrMenuV3 as OrMenu } from '../or-menu-v3';
 import { OrModalV3 as OrModal } from '../or-modal-v3';
-import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
+import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import {
   OrRichTextEditor,
   EditorContainer,
+  EditorContainerFocus,
   EditorInput,
-  Toolbar,
-  ToolbarButton,
-  ToolbarButtonFocused,
-  ToolbarContainer,
 } from './styles';
 
 import { Formats, Tools } from './props';
@@ -224,16 +150,13 @@ export default defineComponent({
   name: 'OrRichTextEditor',
 
   components: {
-    OrIconButton,
-    OrLabel,
-    OrMenuItem,
-    OrMenu,
     OrModal,
     OrInput,
     OrButton,
-    OrPopover,
     OrHint,
     OrError,
+    OrLabel,
+    EditorToolbar,
   },
 
   model: {
@@ -291,6 +214,11 @@ export default defineComponent({
       type: [String, Boolean],
       default: undefined,
     },
+
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [
@@ -312,12 +240,7 @@ export default defineComponent({
     const editorRef = ref<HTMLDivElement>();
     const textareaRef = ref<HTMLTextAreaElement>();
     const containerRef = ref<ComponentPublicInstance<HTMLInputElement>>();
-    const toolbarRef = ref<ComponentPublicInstance<HTMLInputElement>>();
-    const moreButtonRef = ref<InstanceType<typeof OrIconButton>>();
-    const moreRef = ref<InstanceType<typeof OrPopover>>();
-    const toolbarButtonRef = ref<InstanceType<typeof OrIconButton>>();
-    const menuRef = ref<InstanceType<typeof OrMenu>>();
-
+    const toolbarContainerRef = ref<ComponentPublicInstance<HTMLInputElement>>();
 
     // isActive should be set with default values for all toolbar buttons, otherwise it will not work in vue2
     const isActive = ref<{[key: string]: boolean;}>({
@@ -336,7 +259,7 @@ export default defineComponent({
       file: false,
       source: false,
     });
-    const isFocused = ref<boolean>(props.autofocus);
+    const isFocused = ref<boolean>(!props.readonly ? props.autofocus : false);
     const headingLevels = [1, 2, 3, 4] as Level[];
     const activeHeadingLevel = ref<number>(0);
     const markdownOutput = ref<string>('');
@@ -353,48 +276,18 @@ export default defineComponent({
       allowOutsideClick: true,
     });
 
-    const iconsEnum = ref<{[key: string]: string;}>({
-      bold: 'format_bold',
-      italic: 'format_italic',
-      underline: 'format_underlined',
-      strike: 'format_strikethrough',
-      bulletList: 'format_list_bulleted',
-      orderedList: 'format_list_numbered',
-      link: 'link',
-      highlight: 'highlight',
-      redo: 'redo',
-      undo: 'undo',
-      codeBlock: 'code_blocks',
-      blockquote: 'format_quote',
-      file: 'attach_file',
-      source: 'source_notes',
-    });
-    const iconTooltipsEnum = ref<{[key: string]: string;}>({
-      bold: 'Bold',
-      italic: 'Italic',
-      underline: 'Underline',
-      strike: 'Strike',
-      bulletList: 'Bulleted List',
-      orderedList: 'Numbered List',
-      link: 'Link',
-      highlight: 'Highlight',
-      redo: 'Redo',
-      undo: 'Undo',
-      codeBlock: 'Code Block',
-      blockquote: 'Quote',
-      file: 'File',
-      source: 'Source',
-    });
-
     useResizeObserver(root, useDebounceFn((entries) => {
       const entry = entries[0];
       const { width } = entry.contentRect;
-      if (containerRef.value && toolbarRef.value && toolbarLength.value) {
+      const toolbarLength = props.toolbar.flat().length;
+
+      if (containerRef.value && toolbarContainerRef.value && toolbarLength) {
         let lengthOfItem = 0;
-        lengthOfItem = (toolbarRef.value.firstElementChild?.firstElementChild as HTMLDivElement)?.offsetWidth + 16;
+        const toolbarRef = toolbarContainerRef.value.$refs.toolbarRef as HTMLDivElement;
+        lengthOfItem = (toolbarRef?.firstElementChild?.firstElementChild as HTMLDivElement)?.offsetWidth + 16;
 
         const count = (width / lengthOfItem) - 2;
-        countOfNotVisibleTools.value = Math.round(toolbarLength.value - count);
+        countOfNotVisibleTools.value = Math.round(toolbarLength - count);
       }
     }, 10));
 
@@ -421,7 +314,8 @@ export default defineComponent({
           }
         },
         element: editorRef.value,
-        autofocus: props.autofocus,
+        autofocus: !props.readonly ? props.autofocus : false,
+        editable: !props.readonly,
         enableInputRules: true,
         enablePasteRules: true,
         extensions: [
@@ -518,47 +412,14 @@ export default defineComponent({
       },
     });
 
-    const getIndexOfHeading = computed(() => {
-      return props.toolbar.flat().indexOf('heading');
-    });
-
-    const headingIcon = computed(() => {
-      if (activeHeadingLevel.value && isActive.value.heading) {
-        return `format_h${activeHeadingLevel.value}`;
-      }
-      return 'format_paragraph';
-    });
-
-    const toolbarLength = computed(() => {
-      return props.toolbar.flat().length;
-    });
-
-    const notVisibleTools = computed((): Set<string> => {
-      const count = countOfNotVisibleTools.value;
-      const toolbar = props.toolbar.flat();
-      let notVisible = new Set(toolbar.slice(toolbar.length - count, toolbar.length));
-      props.toolbar.forEach(tools => {
-        if (tools.some(item => notVisible.has(item))) {
-          tools.forEach(item => notVisible.add(item));
-        }
-      });
-      return notVisible;
-    });
-
     //Methods
     const handleEditorClick = () => {
       setActiveFormats();
-      isFocused.value = true;
-      editor?.commands.focus();
-      activeHeadingLevel.value = editor?.getAttributes('heading')?.level || 0;
-    };
-
-    const isVisible = (value: string | Array<string>) => {
-      if (Array.isArray(value)) {
-        const isHaveNotVisibleTools = value.some(item => notVisibleTools.value.has(item));
-        return isHaveNotVisibleTools;
+      if (!props.readonly) {
+        isFocused.value = true;
+        editor?.commands.focus();
       }
-      return !notVisibleTools.value.has(value);
+      activeHeadingLevel.value = editor?.getAttributes('heading')?.level || 0;
     };
 
     const handleInput = (event: InputEvent) => {
@@ -569,7 +430,7 @@ export default defineComponent({
       proxyModelValue.value = markdownOutput.value;
     };
 
-    const handleToolbarClick = (item: string, level?: number) => {
+    const handleToolbarClick = ({ item, level }: {item: string; level?: number;}) => {
       switch (item) {
         case 'source':
           disableMarkdown.value = !disableMarkdown.value;
@@ -701,16 +562,7 @@ export default defineComponent({
 
     const containerStyles = computed(() => [
       ...EditorContainer,
-    ]);
-
-    const toolbarContainerStyles = computed(() => [
-      ...ToolbarContainer,
-    ]);
-
-    const toolbarStyles = computed(() => [
-      ...Toolbar,
-      // 'overflow-x-hidden',
-      ...isFocused.value ? ToolbarButtonFocused : ToolbarButton,
+      ...isFocused.value ? EditorContainerFocus : [],
     ]);
 
     const editorInputStyles = computed(() => [
@@ -724,44 +576,37 @@ export default defineComponent({
         editor?.commands.setContent(value as string);
       }
       if (props.format === 'markdown' && value !== markdownOutput.value) {
-        //TODO: const deserialized = deserialize(editor?.schema, value);
-        editor?.commands.setContent(value as string);
+        const deserialized = deserialize(editor?.schema, value);
+        editor?.commands.setContent(deserialized as string);
       }
     });
 
+    watch(props, ({ readonly }) => {
+      isFocused.value = !readonly;
+      editor?.setEditable(!readonly);
+    });
+
     return {
       editor,
       editorRef,
-      toolbarRef,
+      toolbarContainerRef,
       containerRef,
-      toolbarButtonRef,
-      moreButtonRef,
       textareaRef,
-      moreRef,
-      menuRef,
-      iconsEnum,
       handleToolbarClick,
       handleEditorClick,
       isActive,
-      iconTooltipsEnum,
       containerStyles,
-      toolbarContainerStyles,
-      toolbarStyles,
       rootStyles,
       root,
       editorInputStyles,
-      getIndexOfHeading,
       headingLevels,
-      headingIcon,
       attachLink,
       discardLink,
       isOpenLinkModal,
       text,
       link,
       isFocused,
-      isVisible,
       countOfNotVisibleTools,
-      notVisibleTools,
       handleInput,
       proxyModelValue,
       disableMarkdown,

package/src/components/or-rich-text-editor-v3/partials/EditorToolbar.vue

@@ -0,0 +1,238 @@
+<template>
+  <div
+    ref="toolbarRef"
+    :class="toolbarContainerStyles"
+  >
+    <div
+      v-for="(tools, index) in toolbar"
+      :key="index"
+      :class="[...toolbarStyles, { 'hidden': isVisible(tools)}]"
+    >
+      <div
+        v-for="item in tools"
+        :key="item"
+        :class="['flex gap-md', { 'hidden': !isVisible(item)}]"
+      >
+        <or-icon-button
+          v-if="item==='heading'"
+          ref="toolbarButtonRef"
+          :selected="isActive[item]"
+          :disabled="!isFocused"
+          :tooltip="{content: item, placement: 'top'}"
+          :icon="{icon: headingIcon, variant: 'inherit'}"
+          @click="menuRef && menuRef.toggle()"
+        />
+        <or-icon-button
+          v-else-if="isVisible(item)"
+          :tooltip="{content: iconTooltipsEnum[item], placement: 'top'}"
+          :selected="isActive[item]"
+          :disabled="!isFocused"
+          :icon="{icon: iconsEnum[item], variant: 'inherit'}"
+          @click="handleClick(item)"
+        />
+      </div>
+    </div>
+    <or-icon-button
+      v-if="countOfNotVisibleTools > 0"
+      ref="moreButtonRef"
+      :disabled="!isFocused"
+      :icon="{icon: 'more_horiz', variant: 'inherit'}"
+      class="px-sm"
+      @click="moreRef && moreRef.open()"
+    />
+    <or-popover
+      v-if="moreButtonRef"
+      ref="moreRef"
+      :trigger="moreButtonRef && moreButtonRef.root"
+      placement="top-end"
+    >
+      <div class="flex p-sm gap-md">
+        <or-icon-button
+          v-for="item in notVisibleTools"
+          :key="item"
+          :tooltip="{content: iconTooltipsEnum[item], placement: 'top'}"
+          :selected="isActive[item]"
+          :icon="{icon: iconsEnum[item], variant: 'inherit'}"
+          @click="handleClick(item)"
+        />
+      </div>
+    </or-popover>
+    <or-menu
+      v-if="toolbarButtonRef"
+      ref="menuRef"
+      :trigger="toolbarButtonRef[getIndexOfHeading] && toolbarButtonRef[getIndexOfHeading].root"
+      placement="bottom-start"
+    >
+      <or-menu-item
+        v-for="heading in headingLevels"
+        :key="heading"
+        :selected="activeHeadingLevel === heading"
+        @click="handleClick('heading', heading)"
+      >
+        Heading {{ heading }}
+      </or-menu-item>
+      <or-menu-item
+        :selected="!activeHeadingLevel"
+        @click="handleClick('heading')"
+      >
+        None
+      </or-menu-item>
+    </or-menu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, PropType, ComponentPublicInstance } from 'vue-demi';
+import { ToolbarContainer, ToolbarButtonFocused, ToolbarButton, Toolbar } from '../styles';
+import { OrIconButtonV3 as OrIconButton } from '../../or-icon-button-v3';
+import { OrMenuItemV3 as OrMenuItem } from '../../or-menu-item-v3';
+import { OrMenuV3 as OrMenu } from '../../or-menu-v3';
+import { OrPopoverV3 as OrPopover } from '../../or-popover-v3';
+import { Level } from '@tiptap/extension-heading';
+
+import { Tools } from '../props';
+
+export default defineComponent({
+  components: {
+    OrIconButton,
+    OrMenuItem,
+    OrMenu,
+    OrPopover,
+  },
+
+  props: {
+    toolbar: {
+      type: Array as PropType<Tools>,
+      default: () => [],
+    },
+    isFocused: {
+      type: Boolean,
+      default: false,
+    },
+    countOfNotVisibleTools: {
+      type: Number,
+      default: 0,
+    },
+    activeHeadingLevel: {
+      type: Number,
+      default: 0,
+    },
+    isActive: {
+      type: Object as PropType<{ [key: string]: boolean; }>,
+      default: () => ({}),
+    },
+    headingLevels: {
+      type: Array as PropType<Level[]>,
+      default: () => [1, 2, 3, 4],
+    },
+  },
+
+  emits: ['click-tool'],
+
+  setup(props, { emit }) {
+    const toolbarRef = ref<ComponentPublicInstance<HTMLInputElement>>();
+    const moreButtonRef = ref<InstanceType<typeof OrIconButton>>();
+    const moreRef = ref<InstanceType<typeof OrPopover>>();
+    const toolbarButtonRef = ref<InstanceType<typeof OrIconButton>>();
+    const menuRef = ref<InstanceType<typeof OrMenu>>();
+
+    const iconsEnum = ref<{[key: string]: string;}>({
+      bold: 'format_bold',
+      italic: 'format_italic',
+      underline: 'format_underlined',
+      strike: 'format_strikethrough',
+      bulletList: 'format_list_bulleted',
+      orderedList: 'format_list_numbered',
+      link: 'link',
+      highlight: 'highlight',
+      redo: 'redo',
+      undo: 'undo',
+      codeBlock: 'code_blocks',
+      blockquote: 'format_quote',
+      file: 'attach_file',
+      source: 'source_notes',
+    });
+
+    const iconTooltipsEnum = ref<{[key: string]: string;}>({
+      bold: 'Bold',
+      italic: 'Italic',
+      underline: 'Underline',
+      strike: 'Strike',
+      bulletList: 'Bulleted List',
+      orderedList: 'Numbered List',
+      link: 'Link',
+      highlight: 'Highlight',
+      redo: 'Redo',
+      undo: 'Undo',
+      codeBlock: 'Code Block',
+      blockquote: 'Quote',
+      file: 'File',
+      source: 'Source',
+    });
+
+    const notVisibleTools = computed((): Set<string> => {
+      const count = props.countOfNotVisibleTools;
+      const toolbar = props.toolbar.flat();
+      let notVisible = new Set(toolbar.slice(toolbar.length - count, toolbar.length));
+      props.toolbar.forEach(tools => {
+        if (tools.some(item => notVisible.has(item))) {
+          tools.forEach(item => notVisible.add(item));
+        }
+      });
+      return notVisible;
+    });
+
+    const toolbarContainerStyles = computed(() => [
+      ...ToolbarContainer,
+    ]);
+
+    const toolbarStyles = computed(() => [
+      ...Toolbar,
+      ...props.isFocused ? ToolbarButtonFocused : ToolbarButton,
+    ]);
+
+    const getIndexOfHeading = computed(() => {
+      return props.toolbar.flat().indexOf('heading');
+    });
+
+    const headingIcon = computed(() => {
+      if (props.activeHeadingLevel && props.isActive.heading) {
+        return `format_h${props.activeHeadingLevel}`;
+      }
+      return 'format_paragraph';
+    });
+
+    const isVisible = (value: string | Array<string>) => {
+      if (Array.isArray(value)) {
+        const isHaveNotVisibleTools = value.some(item => notVisibleTools.value.has(item));
+        return isHaveNotVisibleTools;
+      }
+      return !notVisibleTools.value.has(value);
+    };
+
+    const handleClick = (item: string, level?: number) => {
+      emit('click-tool', {
+        item,
+        level,
+      });
+    };
+
+    return {
+      toolbarRef,
+      moreButtonRef,
+      moreRef,
+      toolbarButtonRef,
+      menuRef,
+      toolbarContainerStyles,
+      toolbarStyles,
+      isVisible,
+      handleClick,
+      headingIcon,
+      getIndexOfHeading,
+      notVisibleTools,
+      iconsEnum,
+      iconTooltipsEnum,
+    };
+  },
+});
+</script>

package/src/components/or-rich-text-editor-v3/styles.ts

@@ -7,22 +7,13 @@ export const OrRichTextEditor: string[] = [
 
   // Box
   'max-h-full',
+  'w-full',
 ];
 
 export const EditorContainer: string[] = [
   // Layout
   'layout-column',
 
-  // Theme (focus)
-  'focus-within:theme-background-primary-translucent-1',
-  'dark:focus-within:theme-background-primary-translucent-1-dark',
-
-  'focus-within:theme-border-1-primary',
-  'dark:focus-within:theme-border-1-primary-dark',
-
-  'focus-within:theme-outline-2-primary',
-  'dark:focus-within:theme-outline-2-primary-dark',
-
   // Theme (invalid)
   'invalid:theme-background-error-translucent-1',
   'dark:invalid:theme-background-error-translucent-1-dark',
@@ -44,6 +35,18 @@ export const EditorContainer: string[] = [
   'grow',
 ];
 
+export const EditorContainerFocus: string[] = [
+  // Theme (focus)
+  'focus-within:theme-background-primary-translucent-1',
+  'dark:focus-within:theme-background-primary-translucent-1-dark',
+
+  'focus-within:theme-border-1-primary',
+  'dark:focus-within:theme-border-1-primary-dark',
+
+  'focus-within:theme-outline-2-primary',
+  'dark:focus-within:theme-outline-2-primary-dark',
+];
+
 export const ToolbarContainer: string[] = [
   // Layout
   'layout-row',