@onereach/ui-components 4.5.0 → 4.6.0-beta.2747.0

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

@@ -0,0 +1,766 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <or-label>
+      {{ description }}
+    </or-label>
+    <div
+      ref="containerRef"
+      :class="containerStyles"
+      @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="{text: item, placement: 'top'}"
+              :icon="{icon: headingIcon, variant: 'inherit', size: 'm'}"
+              @click="menuRef.open()"
+            />
+            <or-icon-button
+              v-else-if="isVisible(item)"
+              :tooltip="{text: iconTooltipsEnum[item], placement: 'top'}"
+              :selected="isActive[item]"
+              :disabled="!isFocused"
+              :icon="{icon: iconsEnum[item], variant: 'inherit', size: 'm'}"
+              @click="handleToolbarClick(item)"
+            />
+          </div>
+        </div>
+        <or-icon-button
+          v-if="countOfNotVisibleTools > 0"
+          ref="moreButtonRef"
+          :disabled="!isFocused"
+          :icon="{icon: 'more_horiz', variant: 'inherit', size: 'm'}"
+          class="px-sm"
+          @click="moreRef.open()"
+        />
+      </div>
+      <div :class="['p-sm', { 'h-[calc(100%-32px)] md:h-[calc(100%-36px)]': fullHeight }]">
+        <textarea
+          v-show="disableMarkdown"
+          ref="textareaRef"
+          v-model="sourceValue"
+          auto-focus
+          :activated="disableMarkdown"
+          class="w-full h-full resize-none border-none outline-none bg-transparent typography-body-2-regular"
+          @input="handleInput"
+        />
+        <div
+          v-show="!disableMarkdown"
+          ref="editorRef"
+          :class="editorInputStyles"
+        />
+        <slot name="files" />
+      </div>
+    </div>
+    <or-menu
+      v-if="moreButtonRef"
+      ref="moreRef"
+      :trigger="moreButtonRef.root"
+    >
+      <or-menu-item
+        v-for="item in notVisibleTools"
+        :key="item"
+        @click="handleToolbarClick(item)"
+      >
+        <or-icon-button
+          :tooltip="{text: iconTooltipsEnum[item], placement: 'top'}"
+          :selected="isActive[item]"
+          :disabled="!isFocused"
+          :icon="{icon: iconsEnum[item], variant: 'inherit', size: 'm'}"
+        />
+      </or-menu-item>
+    </or-menu>
+    <or-menu
+      v-if="toolbarButtonRef"
+      ref="menuRef"
+      :trigger="toolbarButtonRef[getIndexOfHeading].root"
+      placement="bottom-start"
+    >
+      <or-menu-item
+        v-for="heading in headingLevels"
+        :key="heading"
+        @click="handleToolbarClick('heading', heading)"
+      >
+        Heading {{ heading }}
+      </or-menu-item>
+      <or-menu-item
+        @click="handleToolbarClick('heading')"
+      >
+        None
+      </or-menu-item>
+    </or-menu>
+    <or-modal
+      :is-open="isOpenLinkModal"
+      size="s"
+    >
+      <template v-slot:header>
+        <p class="text-headline-2">
+          Add Link
+        </p>
+      </template>
+      <div>
+        <or-label>
+          Text
+        </or-label>
+        <or-input
+          v-model="text"
+          placeholder="Placeholder"
+          class="pb-md"
+        />
+        <or-label>
+          Link
+        </or-label>
+        <or-input
+          v-model="link"
+          placeholder="Placeholder"
+        />
+      </div>
+      <template v-slot:footer>
+        <div class="flex ml-auto gap-md">
+          <or-button
+            variant="outlined"
+            @click="discardLink"
+          >
+            <p>Cancel</p>
+          </or-button>
+          <or-button
+            @click="attachLink"
+          >
+            <p>Save</p>
+          </or-button>
+        </div>
+      </template>
+    </or-modal>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, onBeforeUnmount, onMounted, watch, ComponentPublicInstance, PropType, nextTick } from 'vue-demi';
+import { useFocusTrap, UseFocusTrapReturn } from '@vueuse/integrations/useFocusTrap';
+import { onClickOutside, useResizeObserver } from '@vueuse/core';
+import { serialize, deserialize } from './utils/markdown';
+
+import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
+import { OrLabelV3 as OrLabel } from '../or-label-v3';
+import { OrMenuV3 as OrMenu } from '../or-menu-v3';
+import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
+import { OrModalV3 as OrModal } from '../or-modal-v3';
+import { OrInputV3 as OrInput } from '../or-input-v3';
+import { OrButtonV3 as OrButton } from '../or-button-v3';
+
+import {
+  EditorContainer,
+  ToolbarContainer,
+  Toolbar,
+  ToolbarButtonFocused,
+  ToolbarButton,
+  EditorInput,
+} from './styles';
+
+import { Formats } from './props';
+
+import { Editor, mergeAttributes } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import Link from '@tiptap/extension-link';
+import Highlight from '@tiptap/extension-highlight';
+import Heading, { Level } from '@tiptap/extension-heading';
+import Placeholder from '@tiptap/extension-placeholder';
+
+import codemirrorNode from './utils/codemirror/codemirrorNode';
+
+export default defineComponent({
+  name: 'OrRichTextEditor',
+
+  components: {
+    OrIconButton,
+    OrLabel,
+    OrMenuItem,
+    OrMenu,
+    OrModal,
+    OrInput,
+    OrButton,
+  },
+
+  inheritAttrs: false,
+
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined,
+    },
+    toolbar: {
+      type: Array <string[]>,
+      default: () => [],
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    autofocus: {
+      type: Boolean,
+      default: false,
+    },
+    format: {
+      type: String as PropType<Formats>,
+      default: Formats.Markup,
+    },
+    fullHeight: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: [
+    'update:modelValue',
+
+    'input',
+    'file-upload',
+  ],
+
+  expose: [
+    'root',
+  ],
+
+  setup(props, context) {
+    // Refs
+    const root = ref<HTMLElement>();
+    let editor = null as Editor | null;
+    const editorRef = ref<HTMLDivElement>();
+    const textareaRef = ref<HTMLTextAreaElement>();
+    const containerRef = ref<ComponentPublicInstance<HTMLInputElement>>();
+    const toolbarRef = ref<ComponentPublicInstance<HTMLInputElement>>();
+    const moreButtonRef = ref<HTMLDivElement>();
+    const moreRef = ref<HTMLDivElement>();
+    const toolbarButtonRef = ref<InstanceType<typeof OrIconButton>>();
+    const menuRef = ref<InstanceType<typeof OrMenu>>();
+    // isActive should be set with default values for all toolbar buttons, otherwise it will not work in vue2
+    const isActive = ref<{[key: string]: boolean;}>({
+      bold: false,
+      italic: false,
+      underline: false,
+      strike: false,
+      bulletList: false,
+      orderedList: false,
+      link: false,
+      highlight: false,
+      redo: false,
+      undo: false,
+      codeBlock: false,
+      blockquote: false,
+      file: false,
+      source: false,
+    });
+    const isFocused = ref<boolean>(props.autofocus);
+    const headingLevels = [1, 2, 3, 4] as Level[];
+    const activeHeadingLevel = ref<number>(0);
+    const markdownOutput = ref<string>('');
+    const isOpenLinkModal = ref<boolean>(false);
+    const disableMarkdown = ref<boolean>(false);
+    const text = ref<string>('');
+    const link = ref<string>('');
+    const countOfNotVisibleTools = ref<number>(0);
+    const sourceValue = ref<string>('');
+
+    let trap: UseFocusTrapReturn = useFocusTrap(editorRef, {
+      immediate: true,
+      fallbackFocus: '.container',
+      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, (entries) => {
+      const entry = entries[0];
+      const { width } = entry.contentRect;
+      if (containerRef.value && toolbarRef.value && toolbarLength.value) {
+        let lengthOfItem = 0;
+        lengthOfItem = (toolbarRef.value.firstElementChild?.firstElementChild as HTMLDivElement)?.offsetWidth + 16;
+
+        const lengthOfToolbar = lengthOfItem * toolbarLength.value;
+
+        if (lengthOfToolbar >= width) {
+          const count = (width / lengthOfItem) - 2;
+          countOfNotVisibleTools.value = Math.round(toolbarLength.value - count);
+        }
+      }
+    });
+
+    onMounted(() => {
+      editor = new Editor({
+        onUpdate: ({ editor }) => {
+          isFocused.value = true;
+          setActiveFormats();
+          const html = editor.getHTML();
+          const text = editor.getText();
+          if (props.format === 'markdown') {
+            markdownOutput.value = serialize(editor.schema, editor.getJSON());
+            proxyModelValue.value = markdownOutput.value;
+          } else {
+            proxyModelValue.value = text === '' ? text : html;
+          }
+        },
+        onCreate: ({ editor }) => {
+          if (props.format === 'markdown') {
+            const deserialized = deserialize(editor.schema, proxyModelValue.value);
+            editor.commands.setContent(deserialized);
+          } else {
+            editor.commands.setContent(proxyModelValue.value as string);
+          }
+        },
+        element: editorRef.value,
+        autofocus: props.autofocus,
+        enableInputRules: true,
+        enablePasteRules: true,
+        extensions: [
+          codemirrorNode,
+          StarterKit.configure({
+            heading: false,
+            codeBlock: false,
+          }),
+          Heading.configure({ levels: headingLevels }).extend({
+            levels: headingLevels,
+            renderHTML({ node, HTMLAttributes }) {
+              return [
+                'h' + node.attrs.level,
+                mergeAttributes(HTMLAttributes, {
+                  class: `typography-headline-${node.attrs.level}`,
+                }),
+                0,
+              ];
+            },
+          }),
+          Underline,
+          Link.configure({
+            openOnClick: true,
+            linkOnPaste: true,
+            autolink: false,
+            protocols: ['ftp', 'mailto', 'http', 'https'],
+            validate: href => /^https?:\/\//.test(href),
+            HTMLAttributes: {
+              class: 'text-primary cursor-pointer',
+            },
+          }),
+          Highlight,
+          Placeholder
+            .configure({
+              placeholder: props.placeholder,
+              emptyEditorClass: 'is-editor-empty text-outline',
+            }),
+        ],
+        editorProps: {
+          attributes: {
+            class: 'flex flex-col focus:outline-none gap-xs',
+          },
+        },
+        parseOptions: {
+          preserveWhitespace: true,
+        },
+      });
+      setActiveFormats();
+      trap.activate();
+    });
+
+    onBeforeUnmount(() => {
+      editor?.destroy();
+    });
+
+    onClickOutside(root, () => {
+      isFocused.value = false;
+      trap.deactivate();
+    });
+
+    // Computed
+    const proxyModelValue = computed({
+      get: () => {
+        return props.modelValue;
+      },
+
+      set: (value) => {
+        context.emit('input', value);
+        context.emit('update:modelValue', value);
+      },
+    });
+
+    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(() => {
+      const count = countOfNotVisibleTools.value;
+      const toolbar = props.toolbar.flat();
+      let notVisible = toolbar.slice(toolbar.length - count, toolbar.length);
+      props.toolbar.forEach(tools => {
+        if (tools.some(item => notVisible.includes(item))) {
+          notVisible = [...notVisible, ...tools];
+        }
+      });
+      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.includes(item));
+        return isHaveNotVisibleTools;
+      }
+      return !notVisibleTools.value.includes(value);
+    };
+
+    const handleInput = (event: InputEvent) => {
+      const target = event.target as HTMLTextAreaElement;
+      const value = target.value;
+      editor?.commands.setContent(deserialize(editor?.schema, value));
+      markdownOutput.value = serialize(editor?.schema, editor?.getJSON());
+      proxyModelValue.value = markdownOutput.value;
+    };
+
+    const handleToolbarClick = (item: string, level?: number) => {
+      switch (item) {
+        case 'source':
+          disableMarkdown.value = !disableMarkdown.value;
+          sourceValue.value = serialize(editor?.schema, editor?.getJSON());
+
+          nextTick(() => textareaRef.value?.focus());
+          break;
+        case 'bulletList':
+        case 'orderedList':
+          item === 'bulletList' ? editor?.commands.toggleBulletList() : editor?.commands.toggleOrderedList();
+          break;
+        case 'link':
+          if (editor) {
+            const cursorPosition = editor?.state.selection.$anchor.pos || 0;
+            const { from, to, empty } = editor.state.selection;
+            const isLink = editor.view.state.doc.nodeAt(cursorPosition)?.marks.filter((mark) => mark.type.name === 'link');
+            const existedText = isLink?.length ? editor.view.state.doc.nodeAt(cursorPosition)?.text || '' : '';
+
+            text.value = empty ? existedText : editor.state.doc.textBetween(from, to, ' ');
+            link.value = editor.getAttributes('link').href || '';
+          }
+          isOpenLinkModal.value = !isOpenLinkModal.value;
+          break;
+        case 'blockquote':
+          editor?.chain().focus().toggleBlockquote().run();
+          break;
+        case 'codeBlock':
+          if (!isActive.value['codeBlock']) {
+            editor?.commands.setNode(item, { language: 'javascript' });
+          } else {
+            editor?.commands.setNode('paragraph');
+          }
+          break;
+        case 'heading':
+          if (!level) {
+            editor?.commands.toggleHeading({ level: 0 as Level });
+            activeHeadingLevel.value = 0;
+          } else {
+            activeHeadingLevel.value = level;
+            editor?.commands.toggleHeading({ level: level as Level });
+          }
+          editor?.commands.focus();
+          break;
+        case 'undo':
+        case 'redo':
+          item === 'undo' ? editor?.commands.undo() : editor?.commands.redo();
+          break;
+        case 'file':
+          context.emit('file-upload');
+          break;
+        default:
+          editor?.chain().focus().toggleMark(item).run();
+          break;
+      }
+    };
+
+    const attachLink = async () => {
+      // empty
+      if (link.value === '') {
+        editor?.chain().focus().extendMarkRange('link').unsetLink().run();
+      }
+
+      const isEmptySelection = editor?.state.selection.empty;
+      const cursorPosition = editor?.state.selection.$anchor.pos || 0;
+      const isLink = editor?.view.state.doc.nodeAt(cursorPosition)?.marks.filter((mark) => mark.type.name === 'link');
+      const existedText = isLink?.length ? editor?.view.state.doc.nodeAt(cursorPosition)?.text : '';
+
+      if (link.value && isEmptySelection && !existedText) {
+        editor?.chain()
+          .focus()
+          .setMark('link', {
+            href: link.value,
+            target: '__blank',
+          })
+          .command(({ tr }) => {
+            const preparedValue = text.value[text.value.length - 1] === ' ' ? text.value : `${text.value} `;
+            tr.insertText(preparedValue);
+            return true;
+          })
+          .run();
+      }
+
+      if (link.value && existedText === text.value && isEmptySelection) {
+        editor?.chain()
+          .extendMarkRange('link')
+          .updateAttributes('link', {
+            href: link.value,
+          })
+          .run();
+      }
+
+      if (link.value && !isEmptySelection) {
+        editor?.chain()
+          .focus()
+          .setMark('link', {
+            href: link.value,
+            target: '__blank',
+          })
+          .run();
+      }
+
+      text.value = '';
+      link.value = '';
+
+      isOpenLinkModal.value = false;
+    };
+
+    const discardLink = () => {
+      isOpenLinkModal.value = false;
+    };
+
+    const setActiveFormats = () => {
+      const toolbarList = props.toolbar.flat() as string[];
+      toolbarList.forEach((item) => {
+        if (item === 'source') {
+          isActive.value[item] = disableMarkdown.value;
+        } else {
+          isActive.value[item] = editor?.isActive(item) || false;
+        }
+      });
+    };
+
+    // Styles
+    const rootStyles = computed(() => {
+      return [
+        'or-rich-text-editor',
+        ...props.fullHeight ? ['h-full'] : [],
+      ];
+    });
+
+    const containerStyles = computed(() => {
+      return [
+        ...EditorContainer,
+        ...props.fullHeight ? ['h-full'] : [],
+      ];
+    });
+
+    const toolbarContainerStyles = computed(() => {
+      return [
+        ...ToolbarContainer,
+      ];
+    });
+
+    const toolbarStyles = computed(() => {
+      return [
+        ...Toolbar,
+        // 'overflow-x-hidden',
+        ...isFocused.value ? ToolbarButtonFocused : ToolbarButton,
+      ];
+    });
+
+    const editorInputStyles = computed(() => {
+      return [
+        'tiptap-editor-v3',
+        ...props.fullHeight ? ['h-full overflow-y-auto'] : [],
+        ...EditorInput,
+      ];
+    });
+
+    //Effects
+    watch(proxyModelValue, (value) => {
+      if (value !== editor?.getHTML() && props.format !== 'markdown') {
+        editor?.commands.setContent(value as string);
+      }
+      if (props.format === 'markdown' && value !== markdownOutput.value) {
+        // const deserialized = deserialize(editor?.schema, value);
+        editor?.commands.setContent(value as string);
+      }
+    });
+
+    return {
+      editor,
+      editorRef,
+      toolbarRef,
+      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,
+      sourceValue,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+.tiptap-editor-v3 {
+  ol { //see if editor can not inherit it
+    @apply mx-lg;
+    list-style: decimal;
+  }
+
+  .ProseMirror {
+    h1, h2, h3, h4, h5, h6, p {
+      @apply m-xs;
+    }
+  }
+
+  ul {
+    @apply mx-lg;
+    list-style: initial;
+  }
+
+  blockquote {
+    @apply mx-lg;
+    @apply my-sm;
+    @apply px-lg;
+    border-left: 4px solid theme('borderColor.primary-opacity-0-16');
+  }
+
+  .is-editor-empty::before {
+    content: attr(data-placeholder);
+    height: 0;
+    pointer-events: none;
+    float: left;
+  }
+
+  .cm-editor {
+    border: none;
+    @apply rounded-md;
+
+    .cm-scroller {
+      @apply rounded-md;
+    }
+
+    &.cm-focused {
+      outline: none;
+    }
+
+    .cm-gutters {
+      background-color: theme('backgroundColor.primary-opacity-0-12');
+      border: none;
+
+      .cm-gutterElement {
+        @apply px-sm+*;
+
+        &.cm-activeLineGutter {
+          background-color: theme('backgroundColor.primary-opacity-0-16');
+        }
+      }
+    }
+  }
+}
+</style>