@onereach/ui-components 18.4.0 → 18.4.2

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

@@ -54,8 +54,8 @@
 
             <OrIconButton
               v-else-if="isVisible(item)"
-              :icon="{ icon: iconsEnum[item], variant: 'inherit' }"
-              :tooltip="{ content: iconTooltipsEnum[item], placement: 'top' }"
+              :icon="{ icon: getRichTextEditorIcon(item), variant: 'inherit' }"
+              :tooltip="{ content: getRichTextEditorTooltipIcon(item), placement: 'top' }"
               :selected="isActive[item]"
               :disabled="disabled || !isFocused"
               @click="handleToolbarClick(item)"
@@ -121,8 +121,8 @@
         <OrIconButton
           v-for="item in notVisibleTools"
           :key="item"
-          :icon="{ icon: iconsEnum[item], variant: 'inherit' }"
-          :tooltip="{ content: iconTooltipsEnum[item], placement: 'top' }"
+          :icon="{ icon: getRichTextEditorIcon(item), variant: 'inherit' }"
+          :tooltip="{ content: getRichTextEditorTooltipIcon(item), placement: 'top' }"
           :selected="isActive[item]"
           @click="handleToolbarClick(item)"
         />
@@ -222,7 +222,7 @@ import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3';
 import { OrModalV3 as OrModal } from '../or-modal-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
-import { Formats, Tools } from './props';
+import { Formats, Tools, RichTextEditorIcons, RichTextEditorTooltips } from './props';
 import * as Styles from './styles';
 import codemirrorNode from './utils/codemirror/codemirrorNode';
 import { deserialize, serialize } from './utils/markdown';
@@ -320,32 +320,12 @@ export default defineComponent({
 
   setup(props, context) {
     let editor = shallowRef<Editor>();
+    const controlRef = ref<HTMLDivElement>();
+    const toolbarRef = ref<ComponentPublicInstance<HTMLInputElement>>();
 
     // Refs & Styles
     const root = ref<HTMLElement>();
 
-    const rootStyles = computed(() => [
-      'or-rich-text-editor-v3',
-      ...Styles.RichTextEditor,
-    ]);
-
-    const toolbarRef = ref<ComponentPublicInstance<HTMLInputElement>>();
-
-    const toolbarStyles = computed(() => [
-      ...Styles.RichTextEditorToolbar,
-    ]);
-
-    const toolbarGroupStyles = computed(() => [
-      ...Styles.RichTextEditorToolbarGroup,
-    ]);
-
-    const controlRef = ref<HTMLDivElement>();
-
-    const controlStyles = computed(() => [
-      'tiptap-editor-v3',
-      ...Styles.RichTextEditorControl,
-    ]);
-
     const textareaRef = ref<HTMLTextAreaElement>();
     const containerRef = ref<ComponentPublicInstance<HTMLInputElement>>();
     const moreButtonRef = ref<InstanceType<typeof OrIconButton>>();
@@ -383,44 +363,10 @@ export default defineComponent({
     const sourceValue = ref<string>('');
 
     let trap: UseFocusTrapReturn = useFocusTrap(controlRef, {
-      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, useDebounceFn((entries) => {
       const entry = entries[0];
@@ -557,6 +503,14 @@ export default defineComponent({
       return props.toolbar.flat().indexOf('heading');
     });
 
+    const getRichTextEditorIcon = computed(() => (item: string) => {
+      return RichTextEditorIcons[item as keyof typeof RichTextEditorTooltips];
+    });
+
+    const getRichTextEditorTooltipIcon = computed(() => (item: string) => {
+      return RichTextEditorTooltips[item as keyof typeof RichTextEditorTooltips];
+    });
+
     const headingIcon = computed(() => {
       if (activeHeadingLevel.value && isActive.value.heading) {
         return `format_h${activeHeadingLevel.value}`;
@@ -728,6 +682,7 @@ export default defineComponent({
       });
     };
 
+
     // Effects
     watch([
       editor,
@@ -749,6 +704,25 @@ export default defineComponent({
       editor?.setEditable(!disabled);
     });
 
+    // Styles
+    const rootStyles = computed(() => [
+      'or-rich-text-editor-v3',
+      ...Styles.RichTextEditor,
+    ]);
+
+    const toolbarStyles = computed(() => [
+      ...Styles.RichTextEditorToolbar,
+    ]);
+
+    const toolbarGroupStyles = computed(() => [
+      ...Styles.RichTextEditorToolbarGroup,
+    ]);
+
+    const controlStyles = computed(() => [
+      'tiptap-editor-v3',
+      ...Styles.RichTextEditorControl,
+    ]);
+
     return {
       root,
       rootStyles,
@@ -768,11 +742,11 @@ export default defineComponent({
       textareaRef,
       moreRef,
       menuRef,
-      iconsEnum,
       handleToolbarClick,
       handleEditorClick,
       isActive,
-      iconTooltipsEnum,
+      getRichTextEditorIcon,
+      getRichTextEditorTooltipIcon,
       getIndexOfHeading,
       headingLevels,
       headingIcon,

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

@@ -4,3 +4,37 @@ export enum Formats {
 }
 
 export type Tools = string[][]; // TODO: Improve this type
+
+export enum RichTextEditorIcons {
+  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',
+}
+
+export enum RichTextEditorTooltips {
+  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',
+}

package/src/types/Item.ts

@@ -1,6 +1,5 @@
 export type Item<T> = {
   label: string;
   value: T;
-
   disabled?: boolean;
 };