@onereach/ui-components 4.0.2 → 4.1.0-beta.2508.0

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

@@ -0,0 +1,79 @@
+// import { action } from '@storybook/addon-actions';
+import { Meta, StoryFn } from '@storybook/vue3';
+import { ref } from 'vue-demi';
+import OrRichTextEditorDocs from './OrRichTextEditor.docs.mdx';
+import OrRichTextEditor from './OrRichTextEditor.vue';
+
+export default {
+  title: 'Experimental/OrRichTextEditor',
+  component: OrRichTextEditor,
+
+  argTypes: {
+    // Props
+    modelValue: {
+      control: { type: 'text' },
+    },
+    value: { // TODO: Remove Vue 2 fallback
+      table: { disable: true },
+    },
+    description: {
+      control: { type: 'text' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+    markdownFormat: {
+      control: { type: 'boolean' },
+    },
+    fullHeight: {
+      control: { type: 'boolean' },
+    },
+    // Events
+    'update:modelValue': {
+      table: { disable: true },
+    },
+
+    input: {
+      table: { disable: true },
+    },
+  },
+
+  parameters: {
+    docs: {
+      page: OrRichTextEditorDocs,
+    },
+
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=608%3A2926',
+    },
+  },
+} as Meta<typeof OrRichTextEditor>;
+
+const Template: StoryFn<typeof OrRichTextEditor> = (args) => ({
+  components: {
+    OrRichTextEditor,
+  },
+
+  setup() {
+    // Refs
+    const model = ref<string>();
+
+    return {
+      args,
+      model,
+    };
+  },
+
+  template: `
+  <div class="p-lg">
+  <OrRichTextEditor
+  v-model="model"
+  v-bind="args"
+  >
+  </OrRichTextEditor>
+  </div>
+  `,
+});
+
+export const RichTextEditor = Template.bind({});

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

@@ -0,0 +1,622 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <or-label>
+      {{ description }}
+    </or-label>
+    <div
+      ref="containerRef"
+      :class="containerStyles"
+      @click="handleEditorClick()"
+    >
+      <div :class="toolbarContainerStyles">
+        <div
+          v-for="(tool, index) in toolbar"
+          :key="index"
+          :class="toolbarStyles"
+        >
+          <div
+            v-for="item in tool"
+            :key="item"
+            :class="toolbarButtonStyles(item)"
+            class="-my-xs"
+          >
+            <or-icon-button
+              v-if="item==='heading'"
+              ref="toolbarButtonRef"
+              :tooltip="{text: item, placement: 'top'}"
+              :icon="{icon: headingIcon, variant: 'inherit', size: 'm'}"
+              @click="menuRef.open()"
+            />
+            <or-icon-button
+              v-else
+              :tooltip="{text: iconTooltipsEnum[item], placement: 'top'}"
+              :icon="{icon: iconsEnum[item], variant: 'inherit', size: 'm'}"
+              @click="handleToolbarClick(item)"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        ref="editorRef"
+        :class="editorInputStyles"
+      />
+    </div>
+    <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 } from 'vue-demi';
+// import { useFocusTrap, UseFocusTrapReturn } from '@vueuse/integrations/useFocusTrap';
+import { onClickOutside } 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,
+  ToolbarButtonActive,
+  ToolbarButtonFocused,
+  ToolbarButton,
+  EditorInput,
+} from './styles';
+
+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,
+
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined,
+    },
+    value: { // TODO: Remove Vue 2 fallback
+      type: String,
+      default: undefined,
+    },
+    toolbar: {
+      type: Array,
+      default: () => [['heading'], ['bold', 'italic', 'strike'], ['underline', 'highlight'], ['link'], ['blockquote', 'codeBlock'], ['bulletList', 'orderedList'], ['undo', 'redo']],
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: 'Write something...',
+    },
+    autofocus: {
+      type: Boolean,
+      default: false,
+    },
+    markdownFormat: {
+      type: Boolean,
+      default: false,
+    },
+    fullHeight: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: [
+    'update:modelValue',
+
+    'input',
+  ],
+
+  expose: [
+    'root',
+  ],
+
+  setup(props, context) {
+    // Refs
+    const root = ref<HTMLElement>();
+    let editor = null as Editor | null;
+    const editorRef = ref<HTMLDivElement>();
+    const containerRef = ref<HTMLDivElement>();
+    const toolbarButtonRef = ref<InstanceType<typeof OrIconButton>>();
+    const menuRef = ref<InstanceType<typeof OrMenu>>();
+    const isActive = ref<{[key: string]: boolean;}>({});
+    const isFocused = ref<boolean>(props.autofocus);
+    const headingLevels = [1, 2, 3, 4] as Level[];
+    const previousHeadingLevel = ref<Level>();
+    const activeHeadingLevel = ref<number>(0);
+    const markdownOutput = ref<string>('');
+    const isOpenLinkModal = ref<boolean>(false);
+    const text = ref<string>('');
+    const link = 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',
+    });
+    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',
+    });
+
+    onMounted(() => {
+      editor = new Editor({
+        onUpdate: ({ editor }) => {
+          isFocused.value = true;
+          setActiveFormats();
+          const html = editor.getHTML();
+          const text = editor.getText();
+          if (props.markdownFormat) {
+            markdownOutput.value = serialize(editor.schema, editor.getJSON());
+            proxyModelValue.value = markdownOutput.value;
+          } else {
+            proxyModelValue.value = text === '' ? text : html;
+          }
+        },
+        onCreate: ({ editor }) => {
+          if (props.markdownFormat) {
+            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,
+        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: 'focus:outline-none',
+          },
+        },
+      });
+      setActiveFormats();
+    });
+
+    onBeforeUnmount(() => {
+      editor?.destroy();
+    });
+
+    onClickOutside(root, () => {
+      isFocused.value = false;
+      // trap.deactivate();
+    });
+
+    // Computed
+    const proxyModelValue = computed({
+      get: () => {
+        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
+      },
+
+      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';
+    });
+
+    //Methods
+    const handleEditorClick = () => {
+      setActiveFormats();
+      isFocused.value = true;
+      editor?.commands.focus();
+    };
+
+    const handleToolbarClick = (item: string, level?: number) => {
+      switch (item) {
+        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: previousHeadingLevel.value as Level });
+            activeHeadingLevel.value = 0;
+          } else {
+            activeHeadingLevel.value = level;
+            previousHeadingLevel.value = level as 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;
+        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) => {
+        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,
+        ...isFocused.value ? ToolbarButtonFocused : ToolbarButton,
+      ];
+    });
+
+    const editorInputStyles = computed(() => {
+      return [
+        'tiptap-editor',
+        ...props.fullHeight ? ['h-full'] : [],
+        ...EditorInput,
+      ];
+    });
+
+    const toolbarButtonStyles = (item: string) => {
+      return [
+        // Layout
+        'flex',
+        // Spacing
+        'gap-md',
+        ...isActive.value[item] ? ToolbarButtonActive : [],
+      ];
+    };
+
+    //Effects
+    watch(proxyModelValue, (value) => {
+      if (value !== editor?.getHTML() && !props.markdownFormat) {
+        editor?.commands.setContent(value as string);
+      }
+      if (props.markdownFormat && value !== markdownOutput.value) {
+        const deserialized = deserialize(editor?.schema, value);
+        editor?.commands.setContent(deserialized);
+      }
+    });
+
+    return {
+      editor,
+      editorRef,
+      containerRef,
+      toolbarButtonRef,
+      menuRef,
+      iconsEnum,
+      handleToolbarClick,
+      handleEditorClick,
+      isActive,
+      iconTooltipsEnum,
+      containerStyles,
+      toolbarContainerStyles,
+      toolbarStyles,
+      rootStyles,
+      root,
+      toolbarButtonStyles,
+      editorInputStyles,
+      getIndexOfHeading,
+      headingLevels,
+      headingIcon,
+      attachLink,
+      discardLink,
+      isOpenLinkModal,
+      text,
+      link,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+.tiptap-editor {
+  ol { //see if editor can not inherit it
+    margin: 0 24px;
+    list-style: decimal;
+  }
+
+  ul {
+    margin: 0 24px;
+    list-style: initial;
+  }
+
+  pre { //TODO: test styles for code block, need to discuss with team
+    background-color: rgba($color: #bad1ec, $alpha: .3);
+    padding: 4px 8px;
+    margin: 4px 0;
+    width: 100%;
+    border-radius: 4px;
+  }
+
+  blockquote {
+    margin: 8px 24px;
+    padding: 0 24px;
+    border-left: 4px solid #bad1ec;
+  }
+
+  .is-editor-empty::before {
+    content: attr(data-placeholder);
+    height: 0;
+    pointer-events: none;
+    float: left;
+  }
+
+  .cm-editor {
+    border: none;
+    border-radius: 4px;
+
+    .cm-scroller {
+       border-radius: 4px;
+    }
+
+    &.cm-focused {
+      outline: none;
+    }
+
+    .cm-gutters {
+      background-color: rgba(0, 95, 177, 0.08);
+      border: none;
+
+      .cm-gutterElement {
+        padding: 0 10px;
+
+        &.cm-activeLineGutter {
+          background-color: rgba(0, 95, 177, 0.07)
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1 @@
+export { default as OrRichTextEditorV3 } from './OrRichTextEditor.vue';