@onereach/ui-components 2.68.0-beta.2034.0 → 2.68.0-beta.2049.0

package/dist/esm/v3/components/or-rich-text-editor-v3/OrRichTextEditor.vue.d.ts

@@ -0,0 +1,149 @@
+import { Editor } from '@tiptap/core';
+import { Level } from '@tiptap/extension-heading';
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    editor: Editor | null;
+    editorRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    containerRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    toolbarButtonRef: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+        [x: string]: ((...args: any[]) => any) | null;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
+    menuRef: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+        [x: string]: ((...args: any[]) => any) | null;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
+    iconsEnum: import("@vue/composition-api").Ref<{
+        [x: string]: string;
+    }>;
+    handleToolbarClick: (item: string, level?: number | undefined) => void;
+    handleEditorClick: () => void;
+    isActive: import("@vue/composition-api").Ref<{
+        [x: string]: boolean;
+    }>;
+    iconTooltipsEnum: import("@vue/composition-api").Ref<{
+        [x: string]: string;
+    }>;
+    containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
+    toolbarButtonStyles: (item: string) => string[];
+    editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    getIndexOfHeading: import("@vue/composition-api").ComputedRef<number>;
+    headingLevels: Level[];
+    headingIcon: import("@vue/composition-api").ComputedRef<string>;
+}> & import("@vue/composition-api").Data, {}, {}, {
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+        required: false;
+    };
+    toolbar: {
+        type: ArrayConstructor;
+        default: () => string[][];
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    markdownFormat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, import("@vue/composition-api").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+        required: false;
+    };
+    toolbar: {
+        type: ArrayConstructor;
+        default: () => string[][];
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    markdownFormat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    modelValue: string;
+    toolbar: unknown[];
+    description: string;
+    placeholder: string;
+    autofocus: boolean;
+    markdownFormat: boolean;
+} & {} & {
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+}, import("@vue/composition-api").ShallowUnwrapRef<{
+    editor: Editor | null;
+    editorRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    containerRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    toolbarButtonRef: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+        [x: string]: ((...args: any[]) => any) | null;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
+    menuRef: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+        [x: string]: ((...args: any[]) => any) | null;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
+    iconsEnum: import("@vue/composition-api").Ref<{
+        [x: string]: string;
+    }>;
+    handleToolbarClick: (item: string, level?: number | undefined) => void;
+    handleEditorClick: () => void;
+    isActive: import("@vue/composition-api").Ref<{
+        [x: string]: boolean;
+    }>;
+    iconTooltipsEnum: import("@vue/composition-api").Ref<{
+        [x: string]: string;
+    }>;
+    containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
+    toolbarButtonStyles: (item: string) => string[];
+    editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    getIndexOfHeading: import("@vue/composition-api").ComputedRef<number>;
+    headingLevels: Level[];
+    headingIcon: import("@vue/composition-api").ComputedRef<string>;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+    modelValue: string;
+    toolbar: unknown[];
+    description: string;
+    placeholder: string;
+    autofocus: boolean;
+    markdownFormat: boolean;
+} & {} & {
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string;
+    toolbar: unknown[];
+    description: string;
+    placeholder: string;
+    autofocus: boolean;
+    markdownFormat: boolean;
+}, true>);
+export default _default;

package/dist/esm/v3/components/or-rich-text-editor-v3/index.d.ts

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

package/dist/esm/v3/components/or-rich-text-editor-v3/index.js

@@ -0,0 +1,40 @@
+export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor-3f24fee0.js';
+import 'vue-demi';
+import '../../useClassAttribute-47fdb016.js';
+import '@vueuse/core';
+import '@vueuse/integrations/useFocusTrap';
+import 'prosemirror-markdown';
+import 'prosemirror-model';
+import 'marked';
+import '../../OrIconButton-85abafab.js';
+import '../../OrIcon-e2fa4cf8.js';
+import 'vue';
+import '../../OrTooltip-1500a1cd.js';
+import '../../OrPopover-94a8f21d.js';
+import '@floating-ui/dom';
+import '../../useElevation-31bfe1f6.js';
+import '../../useResponsive-a02e95b7.js';
+import '../../OrBottomSheet-0eb33b18.js';
+import '../../OrOverlay-738a44d5.js';
+import '../../OrTeleport.vue3-8099178c.js';
+import '../../OrLabel-7d4fe80b.js';
+import '../../OrMenu-d9e12030.js';
+import '../../OrMenuItem-d001f0f6.js';
+import '@tiptap/core';
+import '@tiptap/starter-kit';
+import '@tiptap/extension-underline';
+import '@tiptap/extension-link';
+import '@tiptap/extension-highlight';
+import '@tiptap/extension-heading';
+import '@tiptap/extension-placeholder';
+import '@tiptap/extension-paragraph';
+import '@tiptap/extension-bullet-list';
+import '@tiptap/extension-list-item';
+import '@tiptap/extension-ordered-list';
+import '@tiptap/extension-strike';
+import '@tiptap/extension-italic';
+import '@tiptap/extension-hard-break';
+import '@tiptap/extension-bold';
+import '@tiptap/extension-code-block';
+import '@tiptap/extension-blockquote';
+import '../../style-inject.es-4c6f2515.js';

package/dist/esm/v3/components/or-rich-text-editor-v3/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const EditorContainer: string[];
+export declare const ToolbarContainer: string[];
+export declare const Toolbar: string[];
+export declare const ToolbarButton: string[];
+export declare const ToolbarButtonActive: string[];
+export declare const EditorInput: string[];

package/dist/esm/v3/index.js

@@ -89,6 +89,7 @@ export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-9
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
 export { s as OrTooltip, a as OrTooltipContent } from './OrTooltip-78cd7f6b.js';
 export { s as OrTooltipV3 } from './OrTooltip-1500a1cd.js';
+export { s as OrRichTextEditorV3 } from './OrRichTextEditor-3f24fee0.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 export { u as useElevation } from './useElevation-31bfe1f6.js';
@@ -116,6 +117,26 @@ import '@floating-ui/dom';
 import 'uuid';
 import 'sortablejs';
 import '@vueuse/integrations/useFocusTrap';
+import 'prosemirror-markdown';
+import 'prosemirror-model';
+import 'marked';
+import '@tiptap/core';
+import '@tiptap/starter-kit';
+import '@tiptap/extension-underline';
+import '@tiptap/extension-link';
+import '@tiptap/extension-highlight';
+import '@tiptap/extension-heading';
+import '@tiptap/extension-placeholder';
+import '@tiptap/extension-paragraph';
+import '@tiptap/extension-bullet-list';
+import '@tiptap/extension-list-item';
+import '@tiptap/extension-ordered-list';
+import '@tiptap/extension-strike';
+import '@tiptap/extension-italic';
+import '@tiptap/extension-hard-break';
+import '@tiptap/extension-bold';
+import '@tiptap/extension-code-block';
+import '@tiptap/extension-blockquote';
 
 function getAbbreviation(text, limit) {
   var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.68.0-beta.2034.0",
+  "version": "2.68.0-beta.2049.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -39,6 +39,23 @@
     "@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-blockquote": "2.0.0-beta.209",
+    "@tiptap/extension-bold": "2.0.0-beta.209",
+    "@tiptap/extension-bullet-list": "2.0.0-beta.209",
+    "@tiptap/extension-code-block": "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 +64,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 +80,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",

package/src/components/index.ts

@@ -87,3 +87,4 @@ export * from './or-toast';
 export * from './or-toast-v3';
 export * from './or-tooltip';
 export * from './or-tooltip-v3';
+export * from './or-rich-text-editor-v3';

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({});