@onereach/ui-components 4.5.0-beta.2738.0 → 4.5.0

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

@@ -1,766 +0,0 @@
-<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>