@onereach/ui-components 2.68.0-beta.1987.0 → 2.68.0-beta.2002.0

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]: defaultMarkdownSerializer.nodes.hard_break,
+    };
+
+    onMounted(() => {
+      editor = new Editor({
+        onUpdate: ({ editor }) => {
+          setActiveFormats();
+          const html = editor.getHTML();
+          const text = editor.getText();
+          if (props.markdown) {
+            markdownOutput.value = serialize(editor.schema, editor.getJSON());
+            emit('update:modelValue', markdownOutput.value);
+          } else {
+            emit('update:modelValue', text === '' ? text : html);
+          }
+        },
+        onCreate: ({ editor }) => {
+          if (props.markdown) {
+            const deserialized = deserialize(editor.schema, props.modelValue);
+            // const deserialized = defaultMarkdownParser.parse(props.modelValue);
+            // editor.view.state.doc = deserialized as Node;
+            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);
+    };
+
+    const deserialize = (schema: any, content: any) => {
+      // const html = defaultMarkdownParser.parse(content);
+      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 OrRichTextEditorV3 } from './OrRichTextEditor.vue';

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

@@ -0,0 +1,65 @@
+export const EditorContainer: string[] = [
+  // Colors
+  'border-outline',
+  'dark:border-outline-dark',
+  'focus-within:theme-border-1-primary',
+  'dark:focus-within:theme-border-1-primary-dark',
+  'focus-within:bg-primary-opacity-0-08',
+  'dark:focus-within:bg-primary-opacity-0-08-dark',
+  'focus-within:theme-outline-primary',
+  'dark:focus-within:theme-outline-primary-dark',
+
+  // Sizing
+  'border-1',
+  'rounded-md',
+];
+
+export const ToolbarContainer: string[] = [
+  // Layout
+  'flex',
+  //Spacing
+  'py-sm',
+  //Sizing
+  'border-b-1',
+  //Colors
+  'border-b-outline',
+  'dark:border-b-outline-dark',
+];
+
+export const Toolbar: string[] = [
+  // Layout
+  'flex',
+  // Spacing
+  'px-sm',
+  'gap-md',
+  // Sizing
+  'border-r-1',
+  //Colors
+  'border-r-disabled',
+  'dark:border-r-outline-dark',
+  // Last child
+  'last-of-type:border-none',
+];
+
+export const ToolbarButton: string[] = [
+  // Typography
+  'text-on-disabled',
+  'dark:text-outline-dark',
+];
+
+export const ToolbarButtonActive: string[] = [
+  // Typography
+  'text-on-background',
+  'dark:text-on-background-dark',
+];
+
+export const EditorInput: string[] = [
+  // Spacing
+  'p-sm',
+  // Typography
+  'typography-body-2-regular',
+  'text-on-background',
+  'dark:text-on-background-dark',
+  // Sizing
+  'min-h-[88px]',
+];

package/src/hooks/useElevation.ts

@@ -1,5 +1,6 @@
 import { MaybeElementRef } from '@vueuse/core';
 import { isRef, ref, watch } from 'vue-demi';
+import isVisible from '../utils/isVisible';
 
 export function useElevation(
   element: MaybeElementRef<HTMLElement | undefined>
@@ -8,7 +9,8 @@ export function useElevation(
 
   // Functions
   function getPageElevations(): number[] {
-    return [...document.body.querySelectorAll('*')]
+    return ([...document.body.querySelectorAll('*')] as HTMLElement[])
+      .filter(isVisible)
       .map((element) => getComputedStyle(element))
       .map((style) => Number(style.zIndex))
       .filter((zIndex) => !isNaN(zIndex));

package/src/utils/isVisible.ts

@@ -0,0 +1,5 @@
+function isVisible(element: HTMLElement): boolean {
+  return !(element.offsetParent === null);
+}
+
+export default isVisible;