@onereach/ui-components 2.67.4 → 2.68.0-beta.2001.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.67.4",
+  "version": "2.68.0-beta.2001.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -39,6 +39,21 @@
     "@floating-ui/dom": "0.3.1",
     "@onereach/styles": "^2.32.0",
     "@splidejs/splide": "4.0.6",
+    "@tiptap/core": "2.0.0-beta.209",
+    "@tiptap/extension-bold": "2.0.0-beta.209",
+    "@tiptap/extension-bullet-list": "2.0.0-beta.209",
+    "@tiptap/extension-hard-break": "2.0.0-beta.209",
+    "@tiptap/extension-heading": "2.0.0-beta.209",
+    "@tiptap/extension-highlight": "2.0.0-beta.209",
+    "@tiptap/extension-italic": "2.0.0-beta.209",
+    "@tiptap/extension-link": "2.0.0-beta.209",
+    "@tiptap/extension-list-item": "2.0.0-beta.209",
+    "@tiptap/extension-ordered-list": "2.0.0-beta.209",
+    "@tiptap/extension-paragraph": "2.0.0-beta.209",
+    "@tiptap/extension-placeholder": "2.0.0-beta.209",
+    "@tiptap/extension-strike": "2.0.0-beta.209",
+    "@tiptap/extension-underline": "2.0.0-beta.209",
+    "@tiptap/starter-kit": "2.0.0-beta.209",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",
     "@types/uuid": "8.3.1",
@@ -47,6 +62,8 @@
     "@vueuse/math": "9.5.0",
     "codemirror": "6.0.1",
     "focus-trap": "7.2.0",
+    "marked": "4.2.12",
+    "prosemirror-markdown": "^1.10.1",
     "sortablejs": "1.14.0",
     "uuid": "8.3.2",
     "vue-demi": "0.13.11"
@@ -61,6 +78,7 @@
     "@storybook/testing-library": "^0.0.13",
     "@storybook/vue3": "6.5.15",
     "@types/faker": "5.5.9",
+    "@types/marked": "4.0.8",
     "@vue/composition-api": "1.7.0",
     "faker": "5.5.3",
     "sass": "1.32.8",
@@ -123,6 +141,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "acdc7ab9290ea97b4b82958b4b0c8c1ce5624c7e"
+  }
 }

package/src/components/or-confirm-v3/OrConfirm.vue

@@ -15,7 +15,7 @@
         </slot>
       </div>
 
-      <div :class="['grow', 'overflow-y-auto', 'overflow-x-hidden']">
+      <div :class="['grow', 'overflow-y-auto']">
         <slot />
         <div
           v-if="confirmationText"

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

@@ -0,0 +1,16 @@
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+  PRIMARY_STORY
+} from '@storybook/addon-docs';
+
+<Title />
+<Subtitle />
+<Description />
+<Primary />
+<ArgsTable story={PRIMARY_STORY} />
+<Stories />

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

@@ -0,0 +1,62 @@
+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
+    description: {
+      control: { type: 'text' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+    modelValue: {
+      control: { type: 'text' },
+    },
+    markdown: {
+      control: { type: 'boolean' },
+    },
+  },
+
+  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 text = ref('');
+    return {
+      args,
+      text,
+    };
+  },
+
+  template: `
+  <div class="p-md">
+  <OrRichTextEditor
+  v-bind="args"
+  v-model="text"
+  />
+  </div>
+  `,
+});
+
+export const RichTextEditor = Template.bind({});

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

@@ -0,0 +1,520 @@
+<template>
+  <div
+    ref="root"
+    v-bind="$attrs"
+    :class="rootStyles"
+  >
+    <or-label>
+      {{ description }}
+    </or-label>
+    <div
+      ref="containerRef"
+      :class="containerStyles"
+      @click="handleEditorClick()"
+    >
+      <div :class="toolbarContainerStyles">
+        <div
+          v-for="tool in toolbar"
+          :key="tool"
+          :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>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
+import {
+  MarkdownSerializer as ProseMirrorMarkdownSerializer,
+  defaultMarkdownSerializer,
+} from 'prosemirror-markdown';
+import { DOMParser as ProseMirrorDOMParser, Node, Mark } from 'prosemirror-model';
+import { marked } from 'marked';
+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 {
+  EditorContainer,
+  ToolbarContainer,
+  Toolbar,
+  ToolbarButtonActive,
+  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 Paragraph from '@tiptap/extension-paragraph';
+import BulletList from '@tiptap/extension-bullet-list';
+import ListItem from '@tiptap/extension-list-item';
+import OrderedList from '@tiptap/extension-ordered-list';
+import Strike from '@tiptap/extension-strike';
+import Italic from '@tiptap/extension-italic';
+// import HardBreak from '@tiptap/extension-hard-break';
+import Bold from '@tiptap/extension-bold';
+
+export default defineComponent({
+  name: 'OrRichTextEditor',
+
+  components: {
+    OrIconButton,
+    OrLabel,
+    OrMenuItem,
+    OrMenu,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    toolbar: {
+      type: Array,
+      default: () => [['heading'], ['bold', 'italic', 'strike'], ['underline', 'highlight'], ['link'], ['bulletList', 'orderedList'], ['undo', 'redo']],
+    },
+    description: {
+      type: String,
+      default: 'Description',
+    },
+    placeholder: {
+      type: String,
+      default: 'Write something...',
+    },
+    autofocus: {
+      type: Boolean,
+      default: false,
+    },
+    markdown: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  setup(props, { emit }) {
+    // Refs
+    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 headingLevels = [1, 2, 3, 4] as Level[];
+    const previousHeadingLevel = ref<Level>();
+    const activeHeadingLevel = ref<number>(0);
+    const markdownOutput = ref<string>('');
+    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',
+    });
+
+    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',
+    });
+
+    const serializerMarks = {
+      ...defaultMarkdownSerializer.marks,
+      [Bold.name]: defaultMarkdownSerializer.marks.strong,
+      [Strike.name]: {
+        open: '~~',
+        close: '~~',
+        mixable: true,
+        expelEnclosingWhitespace: true,
+      },
+      [Italic.name]: {
+        open: '_',
+        close: '_',
+        mixable: true,
+        expelEnclosingWhitespace: true,
+      },
+      [Highlight.name]: {
+        open: '==',
+        close: '==',
+        mixable: true,
+        expelEnclosingWhitespace: true,
+      },
+      [Link.name]: {
+        open(state: any, mark: Mark, parent: Node, index: number) {
+          return isPlainURL(mark, parent, index, 1) ? '<' : '[';
+        },
+        close(state: any, mark: Mark, parent: Node, index: number) {
+          const href = mark.attrs.canonicalSrc || mark.attrs.href;
+
+          return isPlainURL(mark, parent, index, -1)
+            ? '>'
+            : `](${state.esc(href)}${
+              mark.attrs.title ? ` ${state.quote(mark.attrs.title)}` : ''
+            })`;
+        },
+      },
+
+    };
+
+    const serializerNodes = {
+      ...defaultMarkdownSerializer.nodes,
+      [Paragraph.name]: defaultMarkdownSerializer.nodes.paragraph,
+      [BulletList.name]: defaultMarkdownSerializer.nodes.bullet_list,
+      [ListItem.name]: defaultMarkdownSerializer.nodes.list_item,
+      [OrderedList.name]: defaultMarkdownSerializer.nodes.ordered_list,
+      // [HardBreak.name]: //TODO: add hard break
+    };
+
+    onMounted(() => {
+      editor = new Editor({
+        onUpdate: ({ editor }) => {
+          setActiveFormats();
+          const html = editor.getHTML();
+          const text = editor.getText();
+          if (props.markdown) {
+            const markdown = markdownOutput.value = serialize(editor.schema, editor.getJSON());
+            emit('update:modelValue', markdown);
+          } else {
+            emit('update:modelValue', text === '' ? text : html);
+          }
+        },
+        onCreate: ({ editor }) => {
+          if (props.markdown) {
+            const deserialized = deserialize(editor.schema, props.modelValue);
+            editor.commands.setContent(deserialized);
+          } else {
+            editor.commands.setContent(props.modelValue);
+          }
+        },
+        element: editorRef.value,
+        autofocus: props.autofocus,
+        extensions: [
+          StarterKit.configure({
+            heading: 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();
+    });
+
+    // Computed
+    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();
+      editor?.commands.focus();
+    };
+
+    const handleToolbarClick = (item: string, level?: number) => {
+      if (item === 'bulletList' || item === 'orderedList') {
+        item === 'bulletList' ? editor?.commands.toggleBulletList() : editor?.commands.toggleOrderedList();
+      }
+      else if (item === 'link') {
+        setLink();
+      }
+      else if (item === '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();
+      }
+      else if (item === 'undo' || item === 'redo') {
+        item === 'undo' ? editor?.commands.undo() : editor?.commands.redo();
+      }
+      else {
+        editor?.chain().focus().toggleMark(item).run();
+      }
+    };
+
+    const setLink = () => {
+      const previousUrl = editor?.getAttributes('link').href;
+      const url = window.prompt('URL', previousUrl);
+
+      // cancelled
+      if (url === null) {
+        return;
+      }
+
+      // empty
+      if (url === '') {
+        editor?.chain().focus().extendMarkRange('link').unsetLink().run();
+        return;
+      }
+
+      // update link
+      editor?.chain()
+        .focus()
+        .extendMarkRange('link')
+        .setLink({ href: url })
+        .run();
+    };
+
+    const setActiveFormats = () => {
+      const toolbarList = props.toolbar.flat() as string[];
+      toolbarList.forEach((item) => {
+        isActive.value[item] = editor?.isActive(item) || false;
+      });
+    };
+
+    // Styles
+    const classAttribute = useClassAttribute();
+
+    const rootStyles = computed(() => {
+      return [
+        'or-rich-text-editor',
+        classAttribute.value,
+      ];
+    });
+
+    const containerStyles = computed(() => {
+      return [
+        ...EditorContainer,
+      ];
+    });
+
+    const toolbarContainerStyles = computed(() => {
+      return [
+        ...ToolbarContainer,
+      ];
+    });
+
+    const toolbarStyles = computed(() => {
+      return [
+        ...Toolbar,
+      ];
+    });
+
+    const editorInputStyles = computed(() => {
+      return [
+        'tiptap-editor',
+        ...EditorInput,
+      ];
+    });
+
+    const toolbarButtonStyles = (item: string) => {
+      return [
+        // Layout
+        'flex',
+        // Spacing
+        'gap-md',
+        ...isActive.value[item] ? ToolbarButtonActive : ToolbarButton,
+      ];
+    };
+
+    const isPlainURL = (link: Mark, parent: Node, index: number, side: number) => {
+      if (link.attrs.title || !/^\w+:/.test(link.attrs.href)) return false;
+      const content = parent.child(index + (side < 0 ? -1 : 0));
+      if (
+        !content.isText ||
+    content.text !== link.attrs.href ||
+    content.marks[content.marks.length - 1] !== link
+      )
+        return false;
+      if (index === (side < 0 ? 1 : parent.childCount - 1)) return true;
+      const next = parent.child(index + (side < 0 ? -2 : 1));
+      return !link.isInSet(next.marks);
+    };
+
+    const serialize = (schema: any, content: any) => {
+      const proseMirrorDocument = schema.nodeFromJSON(content);
+      const serializer = new ProseMirrorMarkdownSerializer(
+        serializerNodes,
+        serializerMarks,
+      );
+
+      return serializer.serialize(proseMirrorDocument, {
+        tightLists: true,
+      });
+    };
+
+    const deserialize = (schema: any, content: any) => {
+      const html = marked.parse(content);
+
+      if (!html) return null;
+
+      const parser = new DOMParser();
+      const { body } = parser.parseFromString(html, 'text/html');
+
+      // append original source as a comment that nodes can access
+      body.append(document.createComment(content));
+
+      const state = ProseMirrorDOMParser.fromSchema(schema).parse(body);
+
+      return state.toJSON();
+    };
+
+    //Effects
+    watch(() => props.modelValue, (value) => {
+      if (value !== editor?.getHTML() && !props.markdown) {
+        editor?.commands.setContent(value);
+      }
+      if (props.markdown && value !== markdownOutput.value) {
+        editor?.commands.setContent(markdownOutput.value);
+      }
+    });
+
+    return {
+      editor,
+      editorRef,
+      containerRef,
+      toolbarButtonRef,
+      menuRef,
+      iconsEnum,
+      handleToolbarClick,
+      handleEditorClick,
+      isActive,
+      iconTooltipsEnum,
+      containerStyles,
+      toolbarContainerStyles,
+      toolbarStyles,
+      rootStyles,
+      toolbarButtonStyles,
+      editorInputStyles,
+      getIndexOfHeading,
+      headingLevels,
+      headingIcon,
+    };
+  },
+});
+</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;
+  }
+
+  .is-editor-empty::before {
+    content: attr(data-placeholder);
+    height: 0;
+    pointer-events: none;
+    float: left;
+  }
+}
+</style>

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

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