vdc-editor 0.0.1

package/README.md

@@ -0,0 +1,177 @@
+
+# Web Editor and React Native App
+
+## Overview
+
+This repository contains two main projects:
+
+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.
+
+---
+
+## Table of Contents
+- [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
+
+```
+/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"
+}
+```
+
+### Breakdown:
+
+- **`"app": "yarn workspace native-app start"`**
+  - 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.
+
+- **`"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.
+
+### How to Use:
+
+1. **To run the mobile app (React Native)**:
+   ```bash
+   yarn app
+   ```
+
+2. **To run the web editor (Vue.js + Tiptap)**:
+   ```bash
+   yarn web
+   ```
+
+---
+
+## 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.

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from './src/index'
+import SBSEditor from './src/index'
+export default SBSEditor

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

@@ -0,0 +1,90 @@
+import { ButtonViewReturnComponentProps } from '../type';
+import { TooltipContentProps } from 'radix-vue';
+import { icons } from './icons';
+import { Editor } from '@tiptap/core';
+import { HTMLAttributes } from 'vue';
+
+interface Props {
+    icon?: keyof typeof icons;
+    title?: string;
+    tooltip?: string;
+    disabled?: boolean;
+    shortcutKeys?: string[];
+    customClass?: string;
+    loading?: boolean;
+    tooltipOptions?: TooltipContentProps;
+    color?: string;
+    action?: ButtonViewReturnComponentProps['action'];
+    isActive?: ButtonViewReturnComponentProps['isActive'];
+    editor?: Editor;
+    variant?: string;
+    class?: HTMLAttributes['class'];
+}
+declare function __VLS_template(): {
+    icon?(_: {}): any;
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    icon: undefined;
+    title: undefined;
+    tooltip: undefined;
+    disabled: boolean;
+    customClass: string;
+    color: undefined;
+    loading: boolean;
+    shortcutKeys: undefined;
+    tooltipOptions: undefined;
+    action: undefined;
+    isActive: undefined;
+    variant: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    icon: undefined;
+    title: undefined;
+    tooltip: undefined;
+    disabled: boolean;
+    customClass: string;
+    color: undefined;
+    loading: boolean;
+    shortcutKeys: undefined;
+    tooltipOptions: undefined;
+    action: undefined;
+    isActive: undefined;
+    variant: string;
+}>>> & Readonly<{}>, {
+    icon: keyof typeof icons;
+    color: string;
+    disabled: boolean;
+    title: string;
+    tooltip: string;
+    shortcutKeys: string[];
+    customClass: string;
+    loading: boolean;
+    tooltipOptions: TooltipContentProps;
+    action: (value?: any) => void;
+    isActive: () => boolean;
+    variant: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+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];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,67 @@
+import { ButtonViewReturnComponentProps } from '../type';
+
+interface Props {
+    icon?: any;
+    title?: string;
+    tooltip?: string;
+    disabled?: boolean;
+    class?: string;
+    btn_class?: string;
+    action?: ButtonViewReturnComponentProps['action'];
+    isActive?: ButtonViewReturnComponentProps['isActive'];
+}
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    icon: undefined;
+    title: undefined;
+    tooltip: undefined;
+    disabled: boolean;
+    action: undefined;
+    isActive: undefined;
+    class: string;
+    btn_class: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    icon: undefined;
+    title: undefined;
+    tooltip: undefined;
+    disabled: boolean;
+    action: undefined;
+    isActive: undefined;
+    class: string;
+    btn_class: string;
+}>>> & Readonly<{}>, {
+    class: string;
+    icon: any;
+    disabled: boolean;
+    title: string;
+    tooltip: string;
+    action: (value?: any) => void;
+    isActive: () => boolean;
+    btn_class: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+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];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,71 @@
+import { ButtonViewReturnComponentProps } from '../type';
+
+interface Props {
+    icon?: any;
+    title?: string;
+    tooltip?: string;
+    disabled?: boolean;
+    class?: string;
+    shortcutKeys?: string[];
+    btn_class?: string;
+    action?: ButtonViewReturnComponentProps['action'];
+    isActive?: ButtonViewReturnComponentProps['isActive'];
+}
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    icon: undefined;
+    title: undefined;
+    tooltip: undefined;
+    disabled: boolean;
+    action: undefined;
+    isActive: undefined;
+    shortcutKeys: undefined;
+    class: string;
+    btn_class: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    icon: undefined;
+    title: undefined;
+    tooltip: undefined;
+    disabled: boolean;
+    action: undefined;
+    isActive: undefined;
+    shortcutKeys: undefined;
+    class: string;
+    btn_class: string;
+}>>> & Readonly<{}>, {
+    class: string;
+    icon: any;
+    disabled: boolean;
+    title: string;
+    tooltip: string;
+    shortcutKeys: string[];
+    action: (value?: any) => void;
+    isActive: () => boolean;
+    btn_class: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+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];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,62 @@
+import { ButtonViewReturnComponentProps } from '../type';
+
+interface Props {
+    icon?: any;
+    class?: string;
+    title?: string;
+    tooltip?: string;
+    disabled?: boolean;
+    shortcutKeys?: string[];
+    color?: string;
+    action?: ButtonViewReturnComponentProps['action'];
+    isActive?: ButtonViewReturnComponentProps['isActive'];
+}
+declare const _default: import('vue').DefineComponent<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    icon: undefined;
+    title: undefined;
+    tooltip: undefined;
+    disabled: boolean;
+    color: undefined;
+    shortcutKeys: undefined;
+    action: undefined;
+    isActive: undefined;
+    class: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    icon: undefined;
+    title: undefined;
+    tooltip: undefined;
+    disabled: boolean;
+    color: undefined;
+    shortcutKeys: undefined;
+    action: undefined;
+    isActive: undefined;
+    class: string;
+}>>> & Readonly<{}>, {
+    class: string;
+    icon: any;
+    color: string;
+    disabled: boolean;
+    title: string;
+    tooltip: string;
+    shortcutKeys: string[];
+    action: (value?: any) => void;
+    isActive: () => boolean;
+}, {}, {}, {}, 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/ColorPicker.vue.d.ts

@@ -0,0 +1,51 @@
+interface Props {
+    modelValue?: string;
+    highlight?: boolean;
+    disabled?: boolean;
+}
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    modelValue: string;
+    highlight: boolean;
+    disabled: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (color: string | undefined) => void;
+    change: (color: string | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    modelValue: string;
+    highlight: boolean;
+    disabled: boolean;
+}>>> & Readonly<{
+    onChange?: ((color: string | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((color: string | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    highlight: boolean;
+    modelValue: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+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];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,162 @@
+import { AnyExtension, JSONContent, Editor as CoreEditor } from '@tiptap/core';
+import { Editor } from '@tiptap/vue-3';
+
+type SBSEditorOnChange = {
+    /** Editor object */
+    editor: CoreEditor;
+    /** Output content, can be a string or JSON content */
+    output: string | JSONContent;
+};
+interface EditorProps {
+    /**
+     * input value
+     */
+    modelValue?: string | object;
+    /**
+     * Editor output type
+     *
+     * @default 'html'
+     */
+    output?: 'html' | 'json' | 'text';
+    /**
+     * dark mode
+     *
+     * @default false
+     */
+    dark?: boolean;
+    dense?: 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;
+    /**
+     * Remove tiptap default wrapper when editor is empty eg. <p></p>
+     *
+     * @default false
+     */
+    removeDefaultWrapper?: 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>;
+}
+declare const _default: import('vue').DefineComponent<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<EditorProps>, {
+    modelValue: string;
+    output: string;
+    dark: undefined;
+    dense: boolean;
+    disabled: boolean;
+    hideToolbar: boolean;
+    disableBubble: boolean;
+    hideBubble: boolean;
+    removeDefaultWrapper: boolean;
+    maxWidth: undefined;
+    minHeight: undefined;
+    maxHeight: undefined;
+    extensions: () => never[];
+    editorClass: undefined;
+    contentClass: undefined;
+}>>, {
+    editor: Editor;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    enter: () => void;
+    change: (value: 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;
+    dense: boolean;
+    disabled: boolean;
+    hideToolbar: boolean;
+    disableBubble: boolean;
+    hideBubble: boolean;
+    removeDefaultWrapper: boolean;
+    maxWidth: undefined;
+    minHeight: undefined;
+    maxHeight: undefined;
+    extensions: () => never[];
+    editorClass: undefined;
+    contentClass: undefined;
+}>>> & Readonly<{
+    onChange?: ((value: SBSEditorOnChange) => any) | undefined;
+    onEnter?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | object | undefined) => any) | undefined;
+    "onChanged:selection"?: ((value: any) => any) | undefined;
+}>, {
+    disabled: boolean;
+    extensions: AnyExtension[];
+    modelValue: string | object;
+    output: "html" | "json" | "text";
+    maxHeight: string | number;
+    maxWidth: string | number;
+    minHeight: string | number;
+    dark: boolean;
+    dense: boolean;
+    hideToolbar: boolean;
+    disableBubble: boolean;
+    hideBubble: boolean;
+    removeDefaultWrapper: 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];
+} & {};