syntaxic-react-editor 1.0.1 → 1.0.2

package/dist/src/components/WordEditor/WordEditor.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { WordEditorProps } from './types';
+declare const WordEditor: React.FC<WordEditorProps>;
+export default WordEditor;

package/dist/src/components/WordEditor/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './WordEditor';
+export { ColorPicker } from './ribbon/components/ColorPicker';
+export type { WordEditorProps, ToolbarOptions, ClipboardOptions, FontOptions, ParagraphOptions, WordEditorPlugin } from './types';

package/dist/src/components/WordEditor/ribbon/components/ColorPicker.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface ColorPickerProps {
+    label: string;
+    icon: React.ReactNode;
+    onSelect: (color: string | null) => void;
+    disabled?: boolean;
+    onOpen?: () => void;
+    variant?: 'big' | 'compact';
+    activeColor?: string;
+}
+export declare const ColorPicker: React.FC<ColorPickerProps>;
+export {};

package/dist/src/components/WordEditor/ribbon/components/ToolbarButton.d.ts

@@ -0,0 +1,9 @@
+import { default as React, HTMLAttributes } from 'react';
+export interface ToolbarButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    icon: React.ReactNode;
+    title: string;
+    isActive?: boolean;
+    label?: string;
+    disabled?: boolean;
+}
+export declare const ToolbarButton: React.FC<ToolbarButtonProps>;

package/dist/src/components/WordEditor/ribbon/tabs/FileTab.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { ActiveStyles, WordEditorPlugin, CommandExec } from '../../types';
+export interface FileTabProps {
+    onSave: () => void;
+    onSaveAsDocs: () => void;
+    onPrint: () => void;
+    toggleHtmlView: () => void;
+    activeStyles: ActiveStyles;
+    showHtml: boolean;
+    execCommand: CommandExec;
+    onImportWord?: () => void;
+    pluginContributions?: WordEditorPlugin['ribbonContributions'];
+    fonts: string[];
+    sizes: {
+        label: string;
+        value: string;
+    }[];
+}
+export declare const FileTab: React.FC<FileTabProps>;

package/dist/src/components/WordEditor/ribbon/tabs/HelpTab.d.ts

@@ -0,0 +1 @@
+export declare function HelpTab(): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/WordEditor/ribbon/tabs/HomeTab.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { WordEditorPlugin, ActiveStyles, ParagraphOptions, FontOptions, ClipboardOptions, EditingOptions, CommandExec } from '../../types';
+export interface HomeTabProps {
+    showHtml: boolean;
+    execCommand: CommandExec;
+    activeStyles: ActiveStyles;
+    fontConf: FontOptions | false;
+    paragraphConf: ParagraphOptions | false;
+    changeLineSpacing: (spacing: string) => void;
+    changeListStyleType: (type: string) => void;
+    clipboardConf: ClipboardOptions | false;
+    handlePaste: () => void;
+    toggleHtmlView: () => void;
+    saveSelection: () => void;
+    onOpenFind?: () => void;
+    onOpenReplace?: () => void;
+    editingConf: EditingOptions | false;
+    pluginContributions?: WordEditorPlugin['ribbonContributions'];
+    toggleSelectionLock?: () => void;
+    fonts: string[];
+    sizes: {
+        label: string;
+        value: string;
+    }[];
+    openTextColorPicker?: () => void;
+    openHighlightColorPicker?: () => void;
+}
+export declare const HomeTab: React.FC<HomeTabProps>;

package/dist/src/components/WordEditor/ribbon/tabs/InsertTab.d.ts

@@ -0,0 +1,28 @@
+import { default as React, Dispatch, SetStateAction } from 'react';
+export interface InsertTabProps {
+    showHtml: boolean;
+    tableConf: boolean;
+    tableMenuRef: React.RefObject<HTMLDivElement | null>;
+    isTableMenuOpen: boolean;
+    setIsTableMenuOpen: Dispatch<SetStateAction<boolean>>;
+    tableGridSize: {
+        r: number;
+        c: number;
+    };
+    setTableGridSize: Dispatch<SetStateAction<{
+        r: number;
+        c: number;
+    }>>;
+    handleInsertTable: (r: number, c: number) => void;
+    mediaConf: boolean;
+    imageInputRef: React.RefObject<HTMLInputElement | null>;
+    linkConf: boolean;
+    execCommand: (cmd: string, val?: string) => void;
+    savedRangeRef: React.MutableRefObject<Range | null>;
+    saveSelection: () => void;
+    isLinkMenuOpen: boolean;
+    setIsLinkMenuOpen: Dispatch<SetStateAction<boolean>>;
+    linkUrl: string;
+    setLinkUrl: Dispatch<SetStateAction<string>>;
+}
+export declare const InsertTab: React.FC<InsertTabProps>;

package/dist/src/components/WordEditor/ribbon/tabs/LayoutTab.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface LayoutTabProps {
+    showHtml: boolean;
+    inputIndentLeft: string;
+    setInputIndentLeft: (val: string) => void;
+    inputIndentRight: string;
+    setInputIndentRight: (val: string) => void;
+    applyIndent: (side: 'left' | 'right', val: number) => void;
+    inputSpacingBefore: string;
+    setInputSpacingBefore: (val: string) => void;
+    inputSpacingAfter: string;
+    setInputSpacingAfter: (val: string) => void;
+    applySpacing: (side: 'before' | 'after', val: number) => void;
+    insertPageBreak: () => void;
+    pagesConf: boolean;
+}
+export declare const LayoutTab: React.FC<LayoutTabProps>;

package/dist/src/components/WordEditor/ribbon/tabs/PictureFormatTab.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface PictureFormatTabProps {
+    showHtml: boolean;
+    activeImage: HTMLElement | null;
+    imageWidth: number;
+    handleImageWidthChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleImageAction: (action: string) => void;
+}
+export declare const PictureFormatTab: React.FC<PictureFormatTabProps>;

package/dist/src/components/WordEditor/ribbon/tabs/TableLayoutTab.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface TableLayoutTabProps {
+    showHtml: boolean;
+    activeTableCell: HTMLElement | null;
+    handleTableAction: (action: string, value?: string | number) => void;
+    saveSelection: () => void;
+}
+export declare const TableLayoutTab: React.FC<TableLayoutTabProps>;

package/dist/src/components/WordEditor/types.d.ts

@@ -0,0 +1,127 @@
+/**
+ * Konfigurasi Detail untuk setiap Grup Toolbar
+ */
+export interface ClipboardOptions {
+    [key: string]: boolean | undefined;
+    paste?: boolean;
+    cut?: boolean;
+    copy?: boolean;
+    undo?: boolean;
+    redo?: boolean;
+}
+export interface FontOptions {
+    [key: string]: boolean | undefined;
+    family?: boolean;
+    size?: boolean;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strikeThrough?: boolean;
+    subscript?: boolean;
+    superscript?: boolean;
+    highlight?: boolean;
+    color?: boolean;
+    clear?: boolean;
+}
+export interface ParagraphOptions {
+    [key: string]: boolean | undefined;
+    bullets?: boolean;
+    numbering?: boolean;
+    outdent?: boolean;
+    indent?: boolean;
+    alignLeft?: boolean;
+    alignCenter?: boolean;
+    alignRight?: boolean;
+    alignJustify?: boolean;
+    lineSpacing?: boolean;
+    blockquote?: boolean;
+}
+export interface EditingOptions {
+    [key: string]: boolean | undefined;
+    find?: boolean;
+    replace?: boolean;
+    lock?: boolean;
+}
+export interface ToolbarOptions {
+    clipboard?: boolean | ClipboardOptions;
+    font?: boolean | FontOptions;
+    paragraph?: boolean | ParagraphOptions;
+    editing?: boolean | EditingOptions;
+    table?: boolean;
+    link?: boolean;
+    media?: boolean;
+    pages?: boolean;
+    code?: boolean;
+}
+export interface ActiveStyles {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikeThrough: boolean;
+    insertUnorderedList: boolean;
+    insertOrderedList: boolean;
+    justifyLeft: boolean;
+    justifyCenter: boolean;
+    justifyRight: boolean;
+    justifyFull: boolean;
+    fontSize: string;
+    fontName: string;
+    subscript: boolean;
+    superscript: boolean;
+    [key: string]: boolean | string;
+}
+export type CommandExec = (command: string, value?: string | null) => void;
+export interface WordEditorPlugin {
+    id: string;
+    name: string;
+    ribbonContributions?: {
+        tabId: 'Home' | 'Insert' | 'Layout' | 'TableLayout' | 'PictureFormat' | 'File' | 'Help';
+        groupId?: 'clipboard' | 'font' | 'paragraph' | 'insert' | 'editing' | 'custom';
+        component: React.ComponentType<{
+            execCommand: CommandExec;
+            activeStyles: ActiveStyles;
+            showHtml: boolean;
+            toggleHtmlView?: () => void;
+            onOpenFind?: () => void;
+            onOpenReplace?: () => void;
+            onImportWord?: () => void;
+            toggleSelectionLock?: () => void;
+            fonts?: string[];
+            sizes?: {
+                label: string;
+                value: string;
+            }[];
+            saveSelection?: () => void;
+            openTextColorPicker?: () => void;
+            openHighlightColorPicker?: () => void;
+            fontConf?: FontOptions | false;
+            paragraphConf?: ParagraphOptions | false;
+            clipboardConf?: ClipboardOptions | false;
+            editingConf?: EditingOptions | false;
+        }>;
+    }[];
+}
+export interface WordEditorProps {
+    initialHTML?: string;
+    onChange?: (html: string) => void;
+    onSave?: (html: string) => void;
+    toolbarOptions?: ToolbarOptions;
+    height?: string;
+    className?: string;
+    initialPaddingLeft?: number;
+    initialPaddingRight?: number;
+    initialIndentLeft?: number;
+    initialIndentRight?: number;
+    initialLineSpacing?: string;
+    initialSpacingBefore?: number;
+    initialSpacingAfter?: number;
+    plugins?: WordEditorPlugin[];
+}
+export interface SearchResult {
+    text: string;
+    context: string;
+    node: Node;
+    start: number;
+    end: number;
+    fullContent?: string;
+}

package/dist/src/components/WordEditor/utils/tableActions.d.ts

@@ -0,0 +1,6 @@
+export type TableAction = 'insertRowAbove' | 'insertRowBelow' | 'insertColLeft' | 'insertColRight' | 'deleteRow' | 'deleteCol' | 'deleteTable' | 'mergeRight' | 'mergeDown' | 'splitCell' | 'mergeCells' | 'alignTop' | 'alignMiddle' | 'alignBottom' | 'justifyLeft' | 'justifyCenter' | 'justifyRight' | 'justifyFull' | 'cellColor' | 'cellBorder' | 'cellPadding' | 'borderTop' | 'borderBottom' | 'borderLeft' | 'borderRight' | 'borderAll' | 'borderNone' | 'paddingTopPlus' | 'paddingTopMinus' | 'paddingTopSet' | 'paddingBottomPlus' | 'paddingBottomMinus' | 'paddingBottomSet' | 'paddingLeftPlus' | 'paddingLeftMinus' | 'paddingLeftSet' | 'paddingRightPlus' | 'paddingRightMinus' | 'paddingRightSet';
+export declare function executeTableAction(action: TableAction | string, activeTableCell: HTMLElement | null, value?: string | number, callbacks?: {
+    onTableDeleted?: () => void;
+    onContentChanged?: () => void;
+    onFocusRequested?: () => void;
+}): void;

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './components/WordEditor/WordEditor';
+export { ColorPicker } from './components/WordEditor/ribbon/components/ColorPicker';
+export type { WordEditorProps, ToolbarOptions, ClipboardOptions, FontOptions, ParagraphOptions, EditingOptions, WordEditorPlugin, ActiveStyles } from './components/WordEditor/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "syntaxic-react-editor",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A powerful and customizable Microsoft Word-like editor for React.",
   "author": "Syntaxic Labs",
   "license": "MIT",
@@ -21,12 +21,12 @@
   ],
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/src/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/index.umd.cjs",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/src/index.d.ts"
     },
     "./style.css": "./dist/style.css"
   },

package/dist/index.d.ts

@@ -1 +0,0 @@
-export { }