@vector-im/matrix-wysiwyg 2.37.11

package/README.md

@@ -0,0 +1,98 @@
+# React Matrix Rich Text Editor
+
+[![react-build](https://github.com/element-hq/matrix-rich-text-editor/actions/workflows/react-build.yml/badge.svg?branch=main)](https://github.com/element-hq/matrix-rich-text-editor/actions/workflows/react-build.yml)
+
+The Matrix Rich Text Editor is a React library.
+
+## TODO NPM / Usage documentation
+
+The wysiwyg composer API is a react hook.
+
+```tsx
+const { ref, isWysiwygReady, wysiwyg } = useWysiwyg();
+
+return (
+    <div>
+        <button type="button" onClick={wysiwyg.bold}>
+            bold
+        </button>
+        <div ref={ref} contentEditable={isWysiwygReady} />
+    </div>
+);
+```
+
+## Contribute
+
+### Install
+
+#### Generate WASM bindings
+
+The composer uses a cross-platform rust library. In order to work as intended, the WASM bindings must be generated according to the [Matrix Rich Text Editor README.md](../../README.md)
+
+#### Yarn install
+
+Requirements:
+
+-   node >= 8.X
+-   yarn 1.X
+
+```sh
+yarn install
+```
+
+### Dev
+
+#### Folder structure
+
+-   Inside the `lib` folder, the wysiwyg composer library files are located with `useWysiwyg` as en entrypoint
+-   Inside the `src` folder, the demo page of the composer is located.
+
+### Dev mode
+
+Launch:
+
+```sh
+yarn dev
+```
+
+A dev server with hot reload is launched on `http://localhost:5173/` by default.
+
+For more information, see [Vite](https://vitejs.dev/guide/features.html#hot-module-replacement) for more information.
+
+### Build
+
+[Vite](https://vitejs.dev/) is the Wysiwyg Composer builder.
+
+To build:
+
+```sh
+yarn build
+```
+
+The builded files are located in the `dist` folder
+
+### Testing
+
+The tests are powered by [Vitest](https://vitest.dev/).
+
+To run them, different options are available:
+
+-   Classic run
+
+```sh
+yarn test
+```
+
+-   Watch mode
+
+```sh
+yarn test:watch
+```
+
+-   Code coverage
+
+```sh
+yarn coverage
+```
+
+The coverage report is located in the `coverage` folder.

package/dist/index.d.ts

@@ -0,0 +1,246 @@
+import { RefObject } from 'react';
+
+export declare const ACTION_TYPES: readonly ["bold", "italic", "strikeThrough", "underline", "undo", "redo", "orderedList", "unorderedList", "inlineCode", "clear", "link", "codeBlock", "quote", "indent", "unindent"];
+
+export declare type ActionState = 'enabled' | 'reversed' | 'disabled';
+
+export declare type ActionTypes = (typeof ACTION_TYPES)[number];
+
+export declare type AllActionStates = Record<ActionTypes, ActionState>;
+
+export declare type AllowedMentionAttributes = Map<'style' | 'data-mention-type', string>;
+
+export declare type BlockType = InputEvent['inputType'] | 'formatInlineCode' | 'clear';
+
+/**
+ */
+export declare class ComposerUpdate {
+    free(): void;
+    /**
+     * @returns {TextUpdate}
+     */
+    text_update(): TextUpdate;
+    /**
+     * @returns {MenuState}
+     */
+    menu_state(): MenuState;
+    /**
+     * @returns {MenuAction}
+     */
+    menu_action(): MenuAction;
+}
+
+export declare type FormattingFunctions = Record<Exclude<ActionTypes, 'link'>, () => void> & {
+    insertText: (text: string) => void;
+    link: (url: string, text?: string) => void;
+    mention: (url: string, text: string, attributes: AllowedMentionAttributes) => void;
+    mentionAtRoom: (attributes: AllowedMentionAttributes) => void;
+    command: (text: string) => void;
+    removeLinks: () => void;
+    getLink: () => string;
+};
+
+export declare type InputEventProcessor = (event: WysiwygEvent, wysiwyg: Wysiwyg, editor: HTMLElement) => WysiwygEvent | null;
+
+/**
+ */
+export declare class Keep {
+    free(): void;
+}
+
+export declare type LinkEvent = Omit<InputEvent, 'data'> & {
+    inputType: 'insertLink';
+    data: {
+        url: string;
+        text?: string;
+    };
+};
+
+export declare type MappedSuggestion = {
+    keyChar: SuggestionChar;
+    text: string;
+    type: SuggestionType;
+};
+
+/**
+ */
+export declare class MenuAction {
+    free(): void;
+    /**
+     * @returns {boolean}
+     */
+    keep(): boolean;
+    /**
+     * @returns {boolean}
+     */
+    none(): boolean;
+    /**
+     * @returns {MenuActionSuggestion | undefined}
+     */
+    suggestion(): MenuActionSuggestion | undefined;
+}
+
+/**
+ */
+export declare class MenuActionSuggestion {
+    free(): void;
+    /**
+     */
+    suggestion_pattern: SuggestionPattern;
+}
+
+/**
+ */
+export declare class MenuState {
+    free(): void;
+    /**
+     * @returns {boolean}
+     */
+    keep(): boolean;
+    /**
+     * @returns {MenuStateUpdate | undefined}
+     */
+    update(): MenuStateUpdate | undefined;
+}
+
+/**
+ */
+export declare class MenuStateUpdate {
+    free(): void;
+    /**
+     */
+    action_states: Map<any, any>;
+}
+
+/**
+ */
+export declare class PatternKey {
+    free(): void;
+    /**
+     */
+    custom_key_value?: string;
+    /**
+     */
+    key_type: PatternKeyType;
+}
+
+/**
+ */
+export declare enum PatternKeyType {
+    At = 0,
+    Hash = 1,
+    Slash = 2,
+    Custom = 3,
+}
+
+export declare function plainToRich(plainText: string, inMessageFormat: boolean): Promise<string>;
+
+/**
+ */
+export declare class ReplaceAll {
+    free(): void;
+    /**
+     */
+    end_utf16_codeunit: number;
+    /**
+     */
+    replacement_html: string;
+    /**
+     */
+    start_utf16_codeunit: number;
+}
+
+export declare function richToPlain(richText: string, inMessageFormat: boolean): Promise<string>;
+
+/**
+ */
+export declare class Selection_2 {
+    free(): void;
+    /**
+     */
+    end_utf16_codeunit: number;
+    /**
+     */
+    start_utf16_codeunit: number;
+}
+
+export declare type SuggestionChar = (typeof SUGGESTIONS)[number] | '';
+
+/**
+ */
+export declare class SuggestionPattern {
+    free(): void;
+    /**
+     */
+    end: number;
+    /**
+     */
+    key: PatternKey;
+    /**
+     */
+    start: number;
+    /**
+     */
+    text: string;
+}
+
+export declare const SUGGESTIONS: readonly ["@", "#", "/", ""];
+
+export declare type SuggestionType = 'mention' | 'command' | 'custom' | 'unknown';
+
+/**
+ */
+export declare class TextUpdate {
+    free(): void;
+    /**
+     */
+    keep?: Keep;
+    /**
+     */
+    replace_all?: ReplaceAll;
+    /**
+     */
+    select?: Selection_2;
+}
+
+export declare type TraceAction = (update: ComposerUpdate | null, name: string, value1?: string | number, value2?: string | number) => ComposerUpdate | null;
+
+export declare type UseWysiwyg = {
+    ref: React.MutableRefObject<HTMLDivElement | null>;
+    isWysiwygReady: boolean;
+    wysiwyg: FormattingFunctions;
+    content: string | null;
+    actionStates: AllActionStates;
+    debug: {
+        modelRef: RefObject<HTMLDivElement>;
+        testRef: RefObject<HTMLDivElement>;
+        resetTestCase: () => void | null;
+        traceAction: TraceAction;
+    };
+    suggestion: MappedSuggestion | null;
+    messageContent: string | null;
+};
+
+export declare function useWysiwyg(wysiwygProps?: WysiwygProps): UseWysiwyg;
+
+export declare type Wysiwyg = {
+    actions: FormattingFunctions;
+    content: () => string;
+    messageContent: () => string;
+};
+
+export declare type WysiwygEvent = WysiwygInputEvent | KeyboardEvent;
+
+export declare type WysiwygInputEvent = ClipboardEvent | LinkEvent | (InputEvent & {
+    inputType: BlockType;
+    data?: string | null;
+});
+
+export declare type WysiwygProps = {
+    isAutoFocusEnabled?: boolean;
+    inputEventProcessor?: InputEventProcessor;
+    initialContent?: string;
+    emojiSuggestions?: Map<string, string>;
+};
+
+export { }