vdc-editor 0.1.19 → 0.1.21

package/README.md

@@ -1,193 +1,57 @@
-# Web Editor and React Native App
+# Gemiso Web Editor
 
-## Overview
+A powerful Vue 3 based rich text editor library with extensive features and customization options.
 
-This repository contains two main projects:
+## Tech Stack
 
-1. **Web Editor**: A web-based text editor built with Vue.js and [Tiptap](https://tiptap.dev/), a modern and extendable rich-text editor framework.
-2. **React Native App**: A mobile app built with React Native that wraps the web editor using a WebView, making the editor accessible on mobile platforms.
+- **Vue 3** - Progressive JavaScript framework for building user interfaces
+- **TypeScript** - Typed superset of JavaScript that compiles to plain JavaScript
+- **Tiptap** - Headless WYSIWYG text editor framework
+- **Tailwind CSS** - Utility-first CSS framework
+- **Vite** - Next generation frontend tooling
+- **Shadcn UI** - Re-usable components built with Tailwind CSS
 
----
+## Development
 
-## Table of Contents
+```bash
+# Install dependencies
+pnpm install
 
-- [Web Editor](#web-editor)
-  - [Features](#features)
-  - [Setup and Installation](#setup-and-installation)
-  - [Usage](#usage)
-- [React Native App](#react-native-app)
-  - [Features](#features-1)
-  - [Setup and Installation](#setup-and-installation-1)
-  - [Usage](#usage-1)
-- [Project Structure](#project-structure)
-- [Scripts](#scripts)
-- [Contributing](#contributing)
-- [License](#license)
-
----
-
-## Web Editor
-
-### Features
-
-- **Rich-text editing**: Using Tiptap to provide a highly customizable editing experience.
-- **Vue.js**: The frontend framework for building reactive user interfaces.
-- **Customization**: Easily extendable with additional features and plugins from the Tiptap ecosystem.
-
-### Setup and Installation
-
-1. **Clone the repository:**
-
-   ```bash
-   git clone https://github.com/your-username/your-repo-name.git
-   cd your-repo-name
-   ```
-
-2. **Navigate to the web editor folder:**
-
-   ```bash
-   cd pakages/web
-   ```
-
-3. **Install dependencies:**
-
-   ```bash
-   npm install
-   ```
-
-4. **Run the development server:**
-
-   ```bash
-   npm run dev
-   ```
-
-5. **Open the editor in your browser** at `http://localhost:5173/`.
-
-### Usage
-
-To start using the editor, simply open the URL in your browser, and you will see a full-featured text editor. You can edit, format, and style text as you like. More features can be added through Tiptap extensions.
-
----
-
-## React Native App
-
-### Features
-
-- **WebView**: Displays the Vue-based web editor inside a WebView component.
-- **Cross-platform**: Available for both iOS and Android through React Native.
-- **Simple navigation**: Load the web editor seamlessly inside the app.
-
-### Setup and Installation
-
-1. **Navigate to the React Native app folder:**
-
-   ```bash
-   cd pakages/native
-   ```
-
-2. **Install dependencies:**
-
-   ```bash
-   npm install
-   ```
-
-3. **Link required packages (for React Native < 0.60):**
-
-   ```bash
-   react-native link
-   ```
-
-4. **Run the app on iOS or Android:**
-
-   For iOS:
-
-   ```bash
-   npx react-native run-ios
-   ```
-
-   For Android:
-
-   ```bash
-   npx react-native run-android
-   ```
-
-### Usage
-
-Once the app is running, it will open the web editor inside a WebView, allowing users to edit text from their mobile devices with a responsive interface.
-
----
-
-## Project Structure
+# Start development server
+pnpm dev
 
-```
-/packages
-│
-├── /web          # Vue.js project containing the Tiptap editor
-│   ├── /src             # Vue components and assets
-│   ├── /public          # Static files
-│   └── package.json     # Web editor dependencies and scripts
-│
-├── /native    # React Native project wrapping the web editor
-│   ├── ...             [Link text](https://docs.expo.dev/get-started/start-developing/)
-│
-└── README.md            # This README file
-```
-
----
-
-## Scripts
-
-The `package.json` file includes the following script commands under the `"scripts"` section:
-
-```json
-"scripts": {
-    "app": "yarn workspace native-app start",
-    "web": "yarn workspace web-app dev"
-}
+# Build library
+pnpm build:lib
 ```
 
-### Breakdown:
+## Available Scripts
 
-- **`"app": "yarn workspace native-app start"`**
+In the project directory, you can run:
 
-  - This command is used to **start the React Native app**.
-  - It specifies that the command should be run within the `native-app` workspace.
-  - `native-app` refers to the folder that contains the React Native code.
-  - When you run `yarn app`, it triggers the `yarn start` command in the `native-app` workspace, which will launch the development environment for the React Native app, allowing you to run it on your mobile devices or emulators.
+### Development
+- `pnpm dev` - Starts the development server using Vite
+- `pnpm build:lib` - Builds the library for production
 
-- **`"web": "yarn workspace web-app dev"`**
-  - This command is used to **start the web editor** (Vue.js + Tiptap).
-  - Similar to the React Native script, it is scoped to the `web-app` workspace.
-  - `web-app` refers to the folder containing the Vue.js web editor.
-  - When you run `yarn web`, it triggers the `yarn dev` command in the `web-app` workspace, which will start the local development server, allowing you to view and develop the editor in a browser.
+### Code Quality
+- `pnpm prettier` - Formats all files using Prettier
+- `pnpm lint` - Runs ESLint to check for code issues
+- `pnpm lint:fix` - Automatically fixes ESLint issues when possible
 
-### How to Use:
+### Publishing
+- `pnpm push` - Builds the library and publishes it to npm registry
 
-1. **To run the mobile app (React Native)**:
+### Version Management
+- `pnpm version:patch` - Bumps patch version (0.0.x), creates git tag, and publishes
+- `pnpm version:minor` - Bumps minor version (0.x.0), creates git tag, and publishes
+- `pnpm version:major` - Bumps major version (x.0.0), creates git tag, and publishes
 
-   ```bash
-   yarn app
-   ```
+### Git Hooks
+- `pnpm prepare` - Sets up Husky for git hooks
 
-2. **To run the web editor (Vue.js + Tiptap)**:
-   ```bash
-   yarn web
-   ```
+## License
 
----
+[MIT License](LICENSE)
 
 ## Contributing
 
-Contributions are welcome! Please follow the steps below to contribute:
-
-1. Fork the repository.
-2. Create a new feature branch (`git checkout -b feature-branch`).
-3. Commit your changes (`git commit -m 'Add some feature'`).
-4. Push to the branch (`git push origin feature-branch`).
-5. Create a new Pull Request.
-
----
-
-## License
-
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+Contributions are welcome! Please feel free to submit a Pull Request.

package/lib/src/components/SelectContextMenu.vue.d.ts

@@ -4,6 +4,7 @@ import { EditorMode } from '../type';
 interface Props {
     editor: Editor | null;
     mode: EditorMode;
+    superTextStore?: any;
 }
 declare function __VLS_template(): {
     default?(_: {}): any;

package/lib/src/components/SuperTextView.vue.d.ts

@@ -1,2 +1,34 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+interface Props {
+    pageId: string;
+    pageNumber: number;
+    superTextStore?: any;
+}
+declare const _default: import('vue').DefineComponent<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    pageId: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    updateWidth: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    pageId: string;
+}>>> & Readonly<{
+    onUpdateWidth?: ((...args: any[]) => any) | undefined;
+}>, {
+    pageId: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/lib/src/components/Toolbar.vue.d.ts

@@ -1,5 +1,5 @@
-import { Editor } from '@tiptap/core';
 import { EditorMode } from '../type';
+import { Editor } from '@tiptap/core';
 
 interface Props {
     editor: Editor;

package/lib/src/components/editor/CoreEditor.vue.d.ts

@@ -0,0 +1,82 @@
+import { EditorProps } from '../../type';
+import { Editor } from '@tiptap/vue-3';
+
+declare const _default: import('vue').DefineComponent<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<EditorProps>, {
+    modelValue: string;
+    output: string;
+    dark: undefined;
+    disabled: boolean;
+    hideToolbar: boolean;
+    disableBubble: boolean;
+    hideBubble: boolean;
+    superTextArea: any;
+    maxWidth: undefined;
+    minHeight: number;
+    maxHeight: undefined;
+    extensions: () => never[];
+    editorClass: undefined;
+    contentClass: undefined;
+}>>, {
+    editor: Editor;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    enter: () => void;
+    change: (value: import('../../type').SBSEditorOnChange) => void;
+    "update:modelValue": (value: string | object | undefined) => void;
+    "changed:selection": (value: any) => void;
+}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<EditorProps>, {
+    modelValue: string;
+    output: string;
+    dark: undefined;
+    disabled: boolean;
+    hideToolbar: boolean;
+    disableBubble: boolean;
+    hideBubble: boolean;
+    superTextArea: any;
+    maxWidth: undefined;
+    minHeight: number;
+    maxHeight: undefined;
+    extensions: () => never[];
+    editorClass: undefined;
+    contentClass: undefined;
+}>>> & Readonly<{
+    onChange?: ((value: import('../../type').SBSEditorOnChange) => any) | undefined;
+    onEnter?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | object | undefined) => any) | undefined;
+    "onChanged:selection"?: ((value: any) => any) | undefined;
+}>, {
+    disabled: boolean;
+    extensions: import('@tiptap/core').AnyExtension[];
+    modelValue: string | object;
+    output: "html" | "json" | "text";
+    maxHeight: string | number;
+    maxWidth: string | number;
+    minHeight: string | number;
+    superTextArea: {
+        view: boolean;
+        button: boolean;
+    };
+    dark: boolean;
+    hideToolbar: boolean;
+    disableBubble: boolean;
+    hideBubble: boolean;
+    editorClass: string | string[] | Record<string, any>;
+    contentClass: string | string[] | Record<string, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/lib/src/components/ui/{context-menu/ContextMenuRadioItem.vue.d.ts → checkbox/Checkbox.vue.d.ts}

@@ -1,17 +1,17 @@
 import { HTMLAttributes } from 'vue';
-import { ContextMenuRadioItemProps } from 'radix-vue';
+import { CheckboxRootProps } from 'radix-vue';
 
 declare function __VLS_template(): {
     default?(_: {}): any;
 };
-declare const __VLS_component: import('vue').DefineComponent<globalThis.ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ContextMenuRadioItemProps & {
+declare const __VLS_component: import('vue').DefineComponent<globalThis.ExtractPropTypes<__VLS_TypePropsToRuntimeProps<CheckboxRootProps & {
     class?: HTMLAttributes["class"];
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    select: (event: Event) => void;
-}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ContextMenuRadioItemProps & {
+    "update:checked": (value: boolean) => void;
+}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<__VLS_TypePropsToRuntimeProps<CheckboxRootProps & {
     class?: HTMLAttributes["class"];
 }>>> & Readonly<{
-    onSelect?: ((event: Event) => any) | undefined;
+    "onUpdate:checked"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/lib/src/hooks/useStore.d.ts

@@ -143,7 +143,7 @@ export declare const useTiptapStore: () => {
         removeSuperText: (state: Pick<import('./useSuperTextStore').ModalState, "id">) => void;
         superText: import('vue').Reactive<import('./useSuperTextStore').ModalState[]>;
         updateSuperText: (state: import('./useSuperTextStore').ModalState) => void;
-        updatePositionSuperText: (state: Pick<import('./useSuperTextStore').ModalState, "position" | "id">) => void;
+        updatePositionSuperText: (state: Pick<import('./useSuperTextStore').ModalState, "position" | "id" | "pageId">) => void;
         addMoreSuperText: (text: string, position?: DOMRect) => string;
         addSuperText: (state: import('./useSuperTextStore').ModalState) => void;
         onUpdatePositionEvent: import('@vueuse/core').EventHookOn<any>;

package/lib/src/hooks/useSuperTextStore.d.ts

@@ -1,5 +1,6 @@
 export type ModalState = {
     id: number | string;
+    pageId?: number | string;
     text: string;
     position?: {
         top?: number | string;
@@ -10,7 +11,7 @@ export declare const useSuperTextStore: () => {
     removeSuperText: (state: Pick<ModalState, "id">) => void;
     superText: import('vue').Reactive<ModalState[]>;
     updateSuperText: (state: ModalState) => void;
-    updatePositionSuperText: (state: Pick<ModalState, "position" | "id">) => void;
+    updatePositionSuperText: (state: Pick<ModalState, "position" | "id" | "pageId">) => void;
     addMoreSuperText: (text: string, position?: DOMRect) => string;
     addSuperText: (state: ModalState) => void;
     onUpdatePositionEvent: import('@vueuse/core').EventHookOn<any>;

package/lib/src/index.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vue';
-import { default as CoreEditor, EditorProps, EditorEmits } from './components/CoreEditor.vue';
+import { default as CoreEditor } from './components/editor/CoreEditor.vue';
 
 declare const SBSEditorPlugin: Plugin;
 export * as extension from './extensions';
@@ -10,5 +10,4 @@ export { useEditor } from '@tiptap/vue-3';
 export { type Editor as EditorInstance } from '@tiptap/core';
 export { enUS, koKR } from './locales';
 export { SBSEditorPlugin, CoreEditor };
-export type { EditorProps, EditorEmits };
 export default SBSEditorPlugin;

package/lib/src/type.d.ts

@@ -1,5 +1,5 @@
-import { Editor as CoreEditor, Extension, JSONContent } from '@tiptap/core';
-import { Editor } from '@tiptap/vue-3';
+import { Editor as CoreEditor, Extension, JSONContent, AnyExtension } from '@tiptap/core';
+import { Editor, EditorOptions } from '@tiptap/vue-3';
 import { icons } from './components/icons';
 import { SplitContext } from './extensions/Page/computed';
 
@@ -146,7 +146,11 @@ export interface PageOption {
 export interface Config {
     sidebar: boolean;
 }
-export type EditorMode = 'editor' | 'straight' | 'report';
+export declare enum EditorMode {
+    EDITOR = "editor",
+    STRAIGHT = "straight",
+    REPORT = "report"
+}
 export interface ITextWithPosition {
     startIndex: number;
     length: number;
@@ -169,3 +173,94 @@ export interface IProofreaderInterface {
     normalizeTextForLanguage(text: string): string;
     setActiveSpellCheck(): void;
 }
+export type KeyDownHandler = NonNullable<EditorOptions['editorProps']['handleKeyDown']>;
+export type UpdateHandler = NonNullable<EditorOptions['onUpdate']>;
+export interface EditorProps {
+    /**
+     * super Text Area
+     *
+     * @default show: false
+     * @default default: false
+     */
+    superTextArea?: {
+        view: boolean;
+        button: boolean;
+    };
+    /**
+     * Editor mode
+     *
+     * @default 'straight'
+     */
+    mode: EditorMode;
+    /**
+     * input value
+     */
+    modelValue?: string | object;
+    /**
+     * Editor output type
+     *
+     * @default 'html'
+     */
+    output?: 'html' | 'json' | 'text';
+    /**
+     * dark mode
+     *
+     * @default false
+     */
+    dark?: boolean;
+    /**
+     * Readonly
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Hide Editor Toolbar
+     *
+     * @default false
+     */
+    hideToolbar?: boolean;
+    /**
+     * Hide Editor Menubar
+     *
+     * @default false
+     */
+    hideMenubar?: boolean;
+    /**
+     * Hide Editor Bubble Menu
+     *
+     * @default false
+     */
+    disableBubble?: boolean;
+    hideBubble?: boolean;
+    /**
+     * Editor content maximum width
+     */
+    maxWidth?: string | number;
+    /**
+     * Editor content minimum height
+     */
+    minHeight?: string | number;
+    /**
+     * Editor content maximum height
+     */
+    maxHeight?: string | number;
+    /**
+     * Tiptap extensions
+     */
+    extensions?: AnyExtension[];
+    /**
+     * Editor container class
+     */
+    editorClass?: string | string[] | Record<string, any>;
+    /**
+     * Editor content class
+     */
+    contentClass?: string | string[] | Record<string, any>;
+}
+export interface EditorEmits {
+    (event: 'enter'): void;
+    (event: 'change', value: SBSEditorOnChange): void;
+    (event: 'update:modelValue', value: EditorProps['modelValue']): void;
+    (event: 'changed:selection', value: any): void;
+}

package/lib/src/utils/eventBus.d.ts

@@ -1,3 +1,4 @@
 export declare enum EventKey {
-    TOGGLE_SUPER_TEXT = "toggle-super-text"
+    TOGGLE_SUPER_TEXT = "toggle-super-text",
+    SUPER_TEXT_UPDATE_POSITION = "SUPER_TEXT_UPDATE_POSITION"
 }