@yonailab/levit-vue 0.0.0-stage → 0.4.0

package/README.md

@@ -1,3 +1,45 @@
-# Temporary Holding Version
+# @yonailab/levit-vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[Levit](https://github.com/azusawa/levit) 에디터의 Vue 3 컴포넌트입니다.
+
+```bash
+npm install @yonailab/levit @yonailab/levit-vue
+```
+
+## 컴포넌트
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { LevitEditor } from '@yonailab/levit-vue';
+import { ko, type DocumentData } from '@yonailab/levit';
+import '@yonailab/levit/levit.css';
+
+const doc = ref<DocumentData>();
+</script>
+
+<template>
+  <LevitEditor v-model="doc" placeholder="메모를 입력하세요" :messages="ko" />
+</template>
+```
+
+- `v-model`로 문서 JSON을 주고받습니다. 돌아온 값을 다시 넣어도 커서는 그대로입니다.
+- 에디터 옵션(`plugins`, `messages`, `uploadImage`, `highlightCode`)을 props로 넘깁니다.
+- `:bubble-menu="false"`, `:slash-menu="false"`로 메뉴를 끌 수 있습니다.
+- `@ready`로 에디터 인스턴스를 받고, `@error`로 업로드 실패 같은 오류를 받습니다.
+- 컴포넌트 ref의 `editor`로도 인스턴스에 접근할 수 있습니다.
+
+## 컴포저블
+
+```vue
+<script setup lang="ts">
+import { useLevitEditor } from '@yonailab/levit-vue';
+
+const { element, editor } = useLevitEditor({ placeholder: '입력하세요' });
+</script>
+
+<template>
+  <button @click="editor?.chain().toggleBold().run()">굵게</button>
+  <div ref="element" />
+</template>
+```

package/dist/index.d.ts

@@ -0,0 +1,161 @@
+import { type PropType, type Ref, type ShallowRef } from 'vue';
+import { type DocumentData, type EditorOptions, type LevitEditor as Editor, type LevitMessages, type LevitPlugin } from '@yonailab/levit';
+export type { Editor };
+/** Editor options, plus whether to add the bubble and slash menus. */
+export interface UseLevitEditorOptions extends Omit<EditorOptions, 'element'> {
+    /** Show the formatting toolbar on selected text. Default: true. */
+    bubbleMenu?: boolean;
+    /** Open the block menu with "/". Default: true. */
+    slashMenu?: boolean;
+    /** Called once the editor exists. */
+    onReady?: (editor: Editor) => void;
+}
+/**
+ * Creates a Levit editor on the element you bind to `element` (with
+ * `ref="element"` or `h('div', { ref: element })`). The editor is made on
+ * mount and destroyed before unmount.
+ */
+export declare function useLevitEditor(options?: UseLevitEditorOptions): {
+    element: Ref<HTMLElement | null>;
+    editor: ShallowRef<Editor | null>;
+};
+/**
+ * A Levit editor with its menus. Bind the document with v-model; listen to
+ * `ready` for the editor instance, or read it from the component ref.
+ */
+export declare const LevitEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<DocumentData>;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    plugins: {
+        type: PropType<LevitPlugin[]>;
+        default: undefined;
+    };
+    messages: {
+        type: PropType<Partial<LevitMessages>>;
+        default: undefined;
+    };
+    uploadImage: {
+        type: PropType<EditorOptions["uploadImage"]>;
+        default: undefined;
+    };
+    highlightCode: {
+        type: PropType<EditorOptions["highlightCode"]>;
+        default: undefined;
+    };
+    bubbleMenu: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    slashMenu: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onError: {
+        type: PropType<(error: unknown) => void>;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (_value: DocumentData) => true;
+    ready: (_editor: Editor) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<DocumentData>;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    plugins: {
+        type: PropType<LevitPlugin[]>;
+        default: undefined;
+    };
+    messages: {
+        type: PropType<Partial<LevitMessages>>;
+        default: undefined;
+    };
+    uploadImage: {
+        type: PropType<EditorOptions["uploadImage"]>;
+        default: undefined;
+    };
+    highlightCode: {
+        type: PropType<EditorOptions["highlightCode"]>;
+        default: undefined;
+    };
+    bubbleMenu: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    slashMenu: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onError: {
+        type: PropType<(error: unknown) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: DocumentData) => any) | undefined;
+    onReady?: ((_editor: Editor) => any) | undefined;
+}>, {
+    placeholder: string;
+    uploadImage: ((file: File) => Promise<string>) | undefined;
+    onError: (error: unknown) => void;
+    highlightCode: ((code: string, language: string) => string) | undefined;
+    plugins: LevitPlugin[];
+    messages: Partial<{
+        editorLabel: string;
+        placeholder: string;
+        formattingToolbar: string;
+        bold: string;
+        italic: string;
+        underline: string;
+        strikethrough: string;
+        highlight: string;
+        code: string;
+        link: string;
+        linkUrl: string;
+        linkPlaceholder: string;
+        quote: string;
+        slashMenuLabel: string;
+        paragraph: string;
+        paragraphDescription: string;
+        heading1: string;
+        heading1Description: string;
+        heading2: string;
+        heading2Description: string;
+        heading3: string;
+        heading3Description: string;
+        quoteDescription: string;
+        codeBlock: string;
+        codeBlockDescription: string;
+        bulletList: string;
+        bulletListDescription: string;
+        orderedList: string;
+        orderedListDescription: string;
+        taskList: string;
+        taskListDescription: string;
+        divider: string;
+        dividerDescription: string;
+        image: string;
+        imageDescription: string;
+        imageUrlPrompt: string;
+        markDone: string;
+        markNotDone: string;
+        codeLanguagePrompt: string;
+        codeLanguageLabel: string;
+        setCodeLanguage: string;
+        plainText: string;
+    }>;
+    bubbleMenu: boolean;
+    slashMenu: boolean;
+    modelValue: DocumentData;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/index.js

@@ -0,0 +1,84 @@
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, shallowRef, watch, } from 'vue';
+import { createBubbleMenu, createLevitEditor, createSlashMenu, sameContent, } from '@yonailab/levit';
+/**
+ * Creates a Levit editor on the element you bind to `element` (with
+ * `ref="element"` or `h('div', { ref: element })`). The editor is made on
+ * mount and destroyed before unmount.
+ */
+export function useLevitEditor(options = {}) {
+    const element = ref(null);
+    // shallowRef: Vue must not wrap the editor in a reactive proxy.
+    const editor = shallowRef(null);
+    let cleanup = () => { };
+    onMounted(() => {
+        if (!element.value)
+            return;
+        const { bubbleMenu = true, slashMenu = true, ...editorOptions } = options;
+        const instance = createLevitEditor(element.value, editorOptions);
+        const menus = [bubbleMenu && createBubbleMenu(instance), slashMenu && createSlashMenu(instance)];
+        editor.value = instance;
+        options.onReady?.(instance);
+        cleanup = () => {
+            for (const menu of menus)
+                if (menu)
+                    menu.destroy();
+            instance.destroy();
+            editor.value = null;
+        };
+    });
+    onBeforeUnmount(() => cleanup());
+    return { element, editor };
+}
+/**
+ * A Levit editor with its menus. Bind the document with v-model; listen to
+ * `ready` for the editor instance, or read it from the component ref.
+ */
+export const LevitEditor = defineComponent({
+    name: 'LevitEditor',
+    props: {
+        modelValue: { type: Object, default: undefined },
+        placeholder: { type: String, default: undefined },
+        plugins: { type: Array, default: undefined },
+        messages: { type: Object, default: undefined },
+        uploadImage: { type: Function, default: undefined },
+        highlightCode: { type: Function, default: undefined },
+        bubbleMenu: { type: Boolean, default: true },
+        slashMenu: { type: Boolean, default: true },
+        // A prop rather than an emit, so without an @error listener the editor
+        // falls back to logging errors to the console.
+        onError: { type: Function, default: undefined },
+    },
+    emits: {
+        'update:modelValue': (_value) => true,
+        ready: (_editor) => true,
+    },
+    setup(props, { emit, expose }) {
+        const { element, editor } = useLevitEditor({
+            initialContent: props.modelValue,
+            placeholder: props.placeholder,
+            plugins: props.plugins,
+            messages: props.messages,
+            uploadImage: props.uploadImage,
+            highlightCode: props.highlightCode,
+            bubbleMenu: props.bubbleMenu,
+            slashMenu: props.slashMenu,
+            onChange: (ed) => emit('update:modelValue', ed.getJSON()),
+            onError: props.onError,
+            onReady: (ed) => emit('ready', ed),
+        });
+        // Replace the content only when the bound value differs, so the value
+        // that comes back from update:modelValue does not reset the caret.
+        watch(() => props.modelValue, (value) => {
+            if (!editor.value || value === undefined)
+                return;
+            if (!sameContent(value, editor.value.getJSON()))
+                editor.value.setJSON(value);
+        });
+        expose({
+            get editor() {
+                return editor.value;
+            },
+        });
+        return () => h('div', { ref: element });
+    },
+});

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "@yonailab/levit-vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.4.0",
+  "description": "Vue components for the Levit editor.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "check:package": "node ../levit/scripts/check-package.mjs --wrapper",
+    "prepublishOnly": "npm run typecheck && npm test && npm run build && npm run check:package"
+  },
+  "peerDependencies": {
+    "@yonailab/levit": "^0.4.0",
+    "vue": "^3.3"
+  },
+  "keywords": [
+    "editor",
+    "wysiwyg",
+    "rich-text",
+    "levit",
+    "vue"
+  ],
+  "author": "yonailab",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/azusawa/levit.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://github.com/azusawa/levit/tree/main/packages/vue#readme",
+  "bugs": {
+    "url": "https://github.com/azusawa/levit/issues"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "vue": "^3.5.45"
+  }
+}