From bc296e9b4fb01b880c3d94f72f97d235117a5ad3 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Wed, 25 Mar 2026 19:45:13 +0400 Subject: [PATCH 1/8] [dev] update data-transformer plugin --- docusaurus.config.js | 66 ++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 63 insertions(+), 3 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index f14224e..9969652 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -48,7 +48,7 @@ const onAtNotationMatch = (data, { key }) => { const onAtNotationFunctionMatch = (data, { key, fullMatch, dir }) => { if (data.indexOf('.md') !== -1 || data.indexOf('.mdx') !== -1 || data.indexOf('.') === -1) { - const result = readFile(dir, data); + const result = readFileFromPath(dir, data); return result ? /@short: (.*)/g.exec(result)[1] : fullMatch; } return fullMatch; @@ -88,11 +88,71 @@ const readFile = (workingDir, filePath) => { return fs.readFileSync(path.normalize(finalPath), 'utf8'); }; +const getContentRelativePath = (dir, filePath) => { + // Already a docs-root-relative path (no ./ or ../ prefix) — return as-is + if (!filePath.startsWith('.')) { + return filePath; + } + + const absolutePath = path.resolve(dir, filePath).replace(/\\/g, '/'); + const i18nDir = path.join(__dirname, 'i18n').replace(/\\/g, '/'); + const docsDir = path.join(__dirname, 'docs').replace(/\\/g, '/'); + + if (absolutePath.startsWith(i18nDir + '/')) { + const currentIndex = absolutePath.indexOf('/current/'); + if (currentIndex !== -1) { + return absolutePath.substring(currentIndex + '/current/'.length); + } + } + + if (absolutePath.startsWith(docsDir + '/')) { + return absolutePath.substring(docsDir.length + 1); + } + + return filePath; +}; + +// Returns the content root for i18n files (i18n/XX/.../current), or null for docs/ files. +const getLocaleContentRoot = (dir) => { + const normalizedDir = dir.replace(/\\/g, '/'); + const currentIndex = normalizedDir.indexOf('/current/'); + if (currentIndex !== -1 && normalizedDir.includes('/i18n/')) { + return normalizedDir.substring(0, currentIndex + '/current'.length); + } + return null; +}; + +// Reads a file by path, supporting both relative (../foo.md) and docs-root-relative (api/foo.md) formats. +// For i18n files, tries the localized version first before falling back to docs/. +const readFileFromPath = (dir, filePath) => { + const result = readFile(dir, filePath); + if (result) return result; + + // If path doesn't start with . it may be docs-root-relative + if (!filePath.startsWith('.')) { + // For i18n files: try the locale's content root first (localized version) + const localeRoot = getLocaleContentRoot(dir); + if (localeRoot) { + const localeResult = readFile(localeRoot, filePath); + if (localeResult) return localeResult; + } + + // Fall back to docs/ (English) + const docsDir = path.join(__dirname, 'docs').replace(/\\/g, '/'); + return readFile(docsDir, filePath); + } + + return false; +}; + const onEmptyLinkMatch = (data, { key, fullMatch, dir }) => { const filePath = fullMatch.substring(fullMatch.indexOf('(') + 1, fullMatch.length - 1); if (filePath.indexOf('.md') !== -1 || filePath.indexOf('.mdx') !== -1 || filePath.indexOf('.') === -1) { - const data = readFile(dir, filePath); - return data ? `[${/.*sidebar_label: (.+)/g.exec(data)[1]}]${fullMatch.match(/\(\D+\)/g)[0]}` : fullMatch; + const fileData = readFileFromPath(dir, filePath); + if (!fileData) return fullMatch; + const label = /.*sidebar_label: (.+)/g.exec(fileData)[1]; + const normalizedPath = getContentRelativePath(dir, filePath); + return `[${label}](${normalizedPath})`; } return fullMatch; }; From fe14b93652534796526bcd62c326718017d6242e Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Wed, 25 Mar 2026 19:46:01 +0400 Subject: [PATCH 2/8] [update] fix links for overview pages --- .../overview/event_bus_methods_overview.md | 10 +- docs/api/overview/events_overview.md | 64 +++++------ docs/api/overview/main_overview.md | 104 +++++++++--------- docs/api/overview/methods_overview.md | 10 +- docs/api/overview/properties_overview.md | 16 +-- docs/api/overview/state_methods_overview.md | 4 +- 6 files changed, 104 insertions(+), 104 deletions(-) diff --git a/docs/api/overview/event_bus_methods_overview.md b/docs/api/overview/event_bus_methods_overview.md index 367bf7d..0e084d9 100644 --- a/docs/api/overview/event_bus_methods_overview.md +++ b/docs/api/overview/event_bus_methods_overview.md @@ -11,8 +11,8 @@ These methods are designed for advanced integrations and custom behavior based o | Name | Description | | ------------------------------------------------- | -------------------------------------------- | -| [](../internal/detach.md) | @getshort(../internal/detach.md) | -| [](../internal/exec.md) | @getshort(../internal/exec.md) | -| [](../internal/intercept.md) | @getshort(../internal/intercept.md) | -| [](../internal/on.md) | @getshort(../internal/on.md) | -| [](../internal/set-next.md) | @getshort(../internal/set-next.md) | +| [](api/internal/detach.md) | @getshort(api/internal/detach.md) | +| [](api/internal/exec.md) | @getshort(api/internal/exec.md) | +| [](api/internal/intercept.md) | @getshort(api/internal/intercept.md) | +| [](api/internal/on.md) | @getshort(api/internal/on.md) | +| [](api/internal/set-next.md) | @getshort(api/internal/set-next.md) | diff --git a/docs/api/overview/events_overview.md b/docs/api/overview/events_overview.md index 12e92be..957e228 100644 --- a/docs/api/overview/events_overview.md +++ b/docs/api/overview/events_overview.md @@ -11,35 +11,35 @@ You can use these events to extend functionality, track user interaction, or tri | Name | Description | | ------------------------------------------------------ | --------------------------------------------- | -| [](../events/align.md) | @getshort(../events/align.md) | -| [](../events/clear-text-format.md) | @getshort(../events/clear-text-format.md) | -| [](../events/copy.md) | @getshort(../events/copy.md) | -| [](../events/create-new.md) | @getshort(../events/create-new.md) | -| [](../events/cut.md) | @getshort(../events/cut.md) | -| [](../events/delete-link.md) | @getshort(../events/delete-link.md) | -| [](../events/export.md) | @getshort(../events/export.md) | -| [](../events/import.md) | @getshort(../events/import.md) | -| [](../events/indent.md) | @getshort(../events/indent.md) | -| [](../events/insert-image.md) | @getshort(../events/insert-image.md) | -| [](../events/insert-line.md) | @getshort(../events/insert-line.md) | -| [](../events/insert-link.md) | @getshort(../events/insert-link.md) | -| [](../events/insert-list.md) | @getshort(../events/insert-list.md) | -| [](../events/outdent.md) | @getshort(../events/outdent.md) | -| [](../events/paste.md) | @getshort(../events/paste.md) | -| [](../events/print.md) | @getshort(../events/print.md) | -| [](../events/redo.md) | @getshort(../events/redo.md) | -| [](../events/resize-image.md) | @getshort(../events/resize-image.md) | -| [](../events/set-font-family.md) | @getshort(../events/set-font-family.md) | -| [](../events/set-font-size.md) | @getshort(../events/set-font-size.md) | -| [](../events/set-line-height.md) | @getshort(../events/set-line-height.md) | -| [](../events/set-text-color.md) | @getshort(../events/set-text-color.md) | -| [](../events/set-text-format.md) | @getshort(../events/set-text-format.md) | -| [](../events/set-text-style.md) | @getshort(../events/set-text-style.md) | -| [](../events/show-popup.md) | @getshort(../events/show-popup.md) | -| [](../events/subscript.md) | @getshort(../events/subscript.md) | -| [](../events/superscript.md) | @getshort(../events/superscript.md) | -| [](../events/toggle-fullscreen-mode.md) | @getshort(../events/toggle-fullscreen-mode.md)| -| [](../events/toggle-layout-mode.md) | @getshort(../events/toggle-layout-mode.md) | -| [](../events/toggle-shortcut-info.md) | @getshort(../events/toggle-shortcut-info.md) | -| [](../events/undo.md) | @getshort(../events/undo.md) | -| [](../events/update-link.md) | @getshort(../events/update-link.md) | +| [](api/events/align.md) | @getshort(api/events/align.md) | +| [](api/events/clear-text-format.md) | @getshort(api/events/clear-text-format.md) | +| [](api/events/copy.md) | @getshort(api/events/copy.md) | +| [](api/events/create-new.md) | @getshort(api/events/create-new.md) | +| [](api/events/cut.md) | @getshort(api/events/cut.md) | +| [](api/events/delete-link.md) | @getshort(api/events/delete-link.md) | +| [](api/events/export.md) | @getshort(api/events/export.md) | +| [](api/events/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md)| +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | diff --git a/docs/api/overview/main_overview.md b/docs/api/overview/main_overview.md index e9e746f..c89b2fc 100644 --- a/docs/api/overview/main_overview.md +++ b/docs/api/overview/main_overview.md @@ -23,75 +23,75 @@ new richtext.RichText("#root", { | Name | Description | | ----------------------------------------------|-------------------------------------------| -| [](../methods/get-value.md) | @getshort(../methods/get-value.md) | -| [](../methods/set-value.md) | @getshort(../methods/set-value.md) | -| [](../methods/set-config.md) | @getshort(../methods/set-config.md) | -| [](../methods/set-locale.md) | @getshort(../methods/set-locale.md) | -| [](../methods/destructor.md) | @getshort(../methods/destructor.md) | +| [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | +| [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | +| [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | +| [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | ## Event Bus methods | Name | Description | | ----------------------------------------------|-------------------------------------------| -| [](../internal/exec.md) | @getshort(../internal/exec.md) | -| [](../internal/intercept.md) | @getshort(../internal/intercept.md) | -| [](../internal/on.md) | @getshort(../internal/on.md) | -| [](../internal/detach.md) | @getshort(../internal/detach.md) | -| [](../internal/set-next.md) | @getshort(../internal/set-next.md) | +| [](api/internal/exec.md) | @getshort(api/internal/exec.md) | +| [](api/internal/intercept.md) | @getshort(api/internal/intercept.md) | +| [](api/internal/on.md) | @getshort(api/internal/on.md) | +| [](api/internal/detach.md) | @getshort(api/internal/detach.md) | +| [](api/internal/set-next.md) | @getshort(api/internal/set-next.md) | ## State methods | Name | Description | | ----------------------------------------------|-------------------------------------------| -| [](../internal/get-state.md) | @getshort(../internal/get-state.md) | -| [](../internal/get-reactive-state.md) | @getshort(../internal/get-reactive-state.md) | +| [](api/internal/get-state.md) | @getshort(api/internal/get-state.md) | +| [](api/internal/get-reactive-state.md) | @getshort(api/internal/get-reactive-state.md) | ## Events | Name | Description | | ----------------------------------------------|-------------------------------------------| -| [](../events/align.md) | @getshort(../events/align.md) | -| [](../events/clear-text-format.md) | @getshort(../events/clear-text-format.md) | -| [](../events/copy.md) | @getshort(../events/copy.md) | -| [](../events/create-new.md) | @getshort(../events/create-new.md) | -| [](../events/cut.md) | @getshort(../events/cut.md) | -| [](../events/delete-link.md) | @getshort(../events/delete-link.md) | -| [](../events/export.md) | @getshort(../events/export.md) | -| [](../events/import.md) | @getshort(../events/import.md) | -| [](../events/indent.md) | @getshort(../events/indent.md) | -| [](../events/insert-image.md) | @getshort(../events/insert-image.md) | -| [](../events/insert-line.md) | @getshort(../events/insert-line.md) | -| [](../events/insert-link.md) | @getshort(../events/insert-link.md) | -| [](../events/insert-list.md) | @getshort(../events/insert-list.md) | -| [](../events/outdent.md) | @getshort(../events/outdent.md) | -| [](../events/paste.md) | @getshort(../events/paste.md) | -| [](../events/print.md) | @getshort(../events/print.md) | -| [](../events/redo.md) | @getshort(../events/redo.md) | -| [](../events/resize-image.md) | @getshort(../events/resize-image.md) | -| [](../events/set-font-family.md) | @getshort(../events/set-font-family.md) | -| [](../events/set-font-size.md) | @getshort(../events/set-font-size.md) | -| [](../events/set-line-height.md) | @getshort(../events/set-line-height.md) | -| [](../events/set-text-color.md) | @getshort(../events/set-text-color.md) | -| [](../events/set-text-format.md) | @getshort(../events/set-text-format.md) | -| [](../events/set-text-style.md) | @getshort(../events/set-text-style.md) | -| [](../events/show-popup.md) | @getshort(../events/show-popup.md) | -| [](../events/subscript.md) | @getshort(../events/subscript.md) | -| [](../events/superscript.md) | @getshort(../events/superscript.md) | -| [](../events/toggle-fullscreen-mode.md) | @getshort(../events/toggle-fullscreen-mode.md) | -| [](../events/toggle-layout-mode.md) | @getshort(../events/toggle-layout-mode.md) | -| [](../events/toggle-shortcut-info.md) | @getshort(../events/toggle-shortcut-info.md) | -| [](../events/undo.md) | @getshort(../events/undo.md) | -| [](../events/update-link.md) | @getshort(../events/update-link.md) | +| [](api/events/align.md) | @getshort(api/events/align.md) | +| [](api/events/clear-text-format.md) | @getshort(api/events/clear-text-format.md) | +| [](api/events/copy.md) | @getshort(api/events/copy.md) | +| [](api/events/create-new.md) | @getshort(api/events/create-new.md) | +| [](api/events/cut.md) | @getshort(api/events/cut.md) | +| [](api/events/delete-link.md) | @getshort(api/events/delete-link.md) | +| [](api/events/export.md) | @getshort(api/events/export.md) | +| [](api/events/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md) | +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | ## Properties | Name | Description | | ----------------------------------------------|-------------------------------------------| -| [](../config/default-styles.md) | @getshort(../config/default-styles.md) | -| [](../config/fullscreen-mode.md) | @getshort(../config/fullscreen-mode.md) | -| [](../config/image-upload-url.md) | @getshort(../config/image-upload-url.md) | -| [](../config/layout-mode.md) | @getshort(../config/layout-mode.md) | -| [](../config/locale.md) | @getshort(../config/locale.md) | -| [](../config/menubar.md) | @getshort(../config/menubar.md) | -| [](../config/toolbar.md) | @getshort(../config/toolbar.md) | -| [](../config/value.md) | @getshort(../config/value.md) | +| [](api/config/default-styles.md) | @getshort(api/config/default-styles.md) | +| [](api/config/fullscreen-mode.md) | @getshort(api/config/fullscreen-mode.md) | +| [](api/config/image-upload-url.md) | @getshort(api/config/image-upload-url.md) | +| [](api/config/layout-mode.md) | @getshort(api/config/layout-mode.md) | +| [](api/config/locale.md) | @getshort(api/config/locale.md) | +| [](api/config/menubar.md) | @getshort(api/config/menubar.md) | +| [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | +| [](api/config/value.md) | @getshort(api/config/value.md) | diff --git a/docs/api/overview/methods_overview.md b/docs/api/overview/methods_overview.md index a1850f7..b6b8f67 100644 --- a/docs/api/overview/methods_overview.md +++ b/docs/api/overview/methods_overview.md @@ -11,8 +11,8 @@ Use this reference to quickly navigate to detailed descriptions of each method, | Name | Description | | ------------------------------------------------------ | ----------------------------------------- | -| [](../methods/destructor.md) | @getshort(../methods/destructor.md) | -| [](../methods/get-value.md) | @getshort(../methods/get-value.md) | -| [](../methods/set-value.md) | @getshort(../methods/set-value.md) | -| [](../methods/set-config.md) | @getshort(../methods/set-config.md) | -| [](../methods/set-locale.md) | @getshort(../methods/set-locale.md) | +| [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | +| [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | +| [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | +| [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | diff --git a/docs/api/overview/properties_overview.md b/docs/api/overview/properties_overview.md index 1d89cf7..255a158 100644 --- a/docs/api/overview/properties_overview.md +++ b/docs/api/overview/properties_overview.md @@ -11,11 +11,11 @@ They help you control layout, toolbar, value, localization, and other aspects of | Name | Description | | --------------------------------------------------------|----------------------------------------------| -| [](../config/default-styles.md) | @getshort(../config/default-styles.md) | -| [](../config/fullscreen-mode.md) | @getshort(../config/fullscreen-mode.md) | -| [](../config/image-upload-url.md) | @getshort(../config/image-upload-url.md) | -| [](../config/layout-mode.md) | @getshort(../config/layout-mode.md) | -| [](../config/locale.md) | @getshort(../config/locale.md) | -| [](../config/menubar.md) | @getshort(../config/menubar.md) | -| [](../config/toolbar.md) | @getshort(../config/toolbar.md) | -| [](../config/value.md) | @getshort(../config/value.md) | +| [](api/config/default-styles.md) | @getshort(api/config/default-styles.md) | +| [](api/config/fullscreen-mode.md) | @getshort(api/config/fullscreen-mode.md) | +| [](api/config/image-upload-url.md) | @getshort(api/config/image-upload-url.md) | +| [](api/config/layout-mode.md) | @getshort(api/config/layout-mode.md) | +| [](api/config/locale.md) | @getshort(api/config/locale.md) | +| [](api/config/menubar.md) | @getshort(api/config/menubar.md) | +| [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | +| [](api/config/value.md) | @getshort(api/config/value.md) | diff --git a/docs/api/overview/state_methods_overview.md b/docs/api/overview/state_methods_overview.md index 79ffabb..8b828ee 100644 --- a/docs/api/overview/state_methods_overview.md +++ b/docs/api/overview/state_methods_overview.md @@ -11,5 +11,5 @@ These methods are useful for debugging, integrating with reactive systems, or im | Name | Description | | ----------------------------------------------------------- | ------------------------------------------------ | -| [](../internal/get-reactive-state.md) | @getshort(../internal/get-reactive-state.md) | -| [](../internal/get-state.md) | @getshort(../internal/get-state.md) | +| [](api/internal/get-reactive-state.md) | @getshort(api/internal/get-reactive-state.md) | +| [](api/internal/get-state.md) | @getshort(api/internal/get-state.md) | From 06e3513e3907e3deb2bdc5655bb414d06a924050 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 26 Mar 2026 11:31:56 +0400 Subject: [PATCH 3/8] [update] check properties via AI (technical aspects) --- docs/api/config/layout-mode.md | 2 +- docs/api/config/menubar.md | 8 ++++- docs/api/config/theme.md | 42 ++++++++++++++++++++++++ docs/api/config/toolbar.md | 6 ++-- docs/api/overview/main_overview.md | 1 + docs/api/overview/properties_overview.md | 1 + sidebars.js | 1 + 7 files changed, 56 insertions(+), 5 deletions(-) create mode 100644 docs/api/config/theme.md diff --git a/docs/api/config/layout-mode.md b/docs/api/config/layout-mode.md index 10b21a8..0458e9b 100644 --- a/docs/api/config/layout-mode.md +++ b/docs/api/config/layout-mode.md @@ -13,7 +13,7 @@ description: You can learn about the layoutMode config in the documentation of t ### Usage ~~~jsx {} -layoutMode: "classic" | "document"; +layoutMode?: "classic" | "document"; ~~~ The `"classic"` mode represents the edit area that fits the entire page. The `"document"` mode closely represent the real document sizes (sizes used: A4, A5, A6, A7). diff --git a/docs/api/config/menubar.md b/docs/api/config/menubar.md index 8a452f0..d6152f4 100644 --- a/docs/api/config/menubar.md +++ b/docs/api/config/menubar.md @@ -13,7 +13,13 @@ description: You can learn about the menubar config in the documentation of the ### Usage ~~~jsx {} -menubar?: boolean; +menubar?: boolean; +~~~ + +### Default config + +~~~jsx +menubar: false; ~~~ ### Example diff --git a/docs/api/config/theme.md b/docs/api/config/theme.md new file mode 100644 index 0000000..5cd6d9a --- /dev/null +++ b/docs/api/config/theme.md @@ -0,0 +1,42 @@ +--- +sidebar_label: theme +title: theme Config +description: You can learn about the theme config in the documentation of the DHTMLX JavaScript RichText library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText. +--- + +# theme + +### Description + +@short: Optional. Specifies the visual theme applied to the RichText editor + +### Usage + +~~~jsx {} +theme?: { + name: string; + fonts: boolean; +}; +~~~ + +### Parameters + +- `name` - (required) the name of the theme to apply +- `fonts` - (required) defines whether to load the fonts bundled with the theme + +### Example + +~~~jsx {3-6} +// initialize RichText +new richtext.Richtext("#root", { + theme: { + name: "dark", + fonts: true + } + // other configuration properties +}); +~~~ + +**Change log:** The property was added in v2.0 + +**Related articles:** [Configuration](guides/configuration.md) diff --git a/docs/api/config/toolbar.md b/docs/api/config/toolbar.md index 79e2fe3..102a0f6 100644 --- a/docs/api/config/toolbar.md +++ b/docs/api/config/toolbar.md @@ -13,7 +13,7 @@ description: You can learn about the toolbar config in the documentation of the ### Usage ~~~jsx {} -toolbar?: boolean | Array any }>; +toolbar?: boolean | Array void }>; ~~~ #### Available buttons within Toolbar @@ -129,7 +129,7 @@ new richtext.Richtext("#root", { ### Default config ~~~jsx -const defaultToolbarButtons = { +const defaultToolbarButtons = [ "undo", "redo", "separator", @@ -162,7 +162,7 @@ const defaultToolbarButtons = { "separator", "fullscreen", "mode" -}; +]; ~~~ :::tip diff --git a/docs/api/overview/main_overview.md b/docs/api/overview/main_overview.md index c89b2fc..175f0e6 100644 --- a/docs/api/overview/main_overview.md +++ b/docs/api/overview/main_overview.md @@ -93,5 +93,6 @@ new richtext.RichText("#root", { | [](api/config/layout-mode.md) | @getshort(api/config/layout-mode.md) | | [](api/config/locale.md) | @getshort(api/config/locale.md) | | [](api/config/menubar.md) | @getshort(api/config/menubar.md) | +| [](api/config/theme.md) | @getshort(api/config/theme.md) | | [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | | [](api/config/value.md) | @getshort(api/config/value.md) | diff --git a/docs/api/overview/properties_overview.md b/docs/api/overview/properties_overview.md index 255a158..1c5dae3 100644 --- a/docs/api/overview/properties_overview.md +++ b/docs/api/overview/properties_overview.md @@ -17,5 +17,6 @@ They help you control layout, toolbar, value, localization, and other aspects of | [](api/config/layout-mode.md) | @getshort(api/config/layout-mode.md) | | [](api/config/locale.md) | @getshort(api/config/locale.md) | | [](api/config/menubar.md) | @getshort(api/config/menubar.md) | +| [](api/config/theme.md) | @getshort(api/config/theme.md) | | [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | | [](api/config/value.md) | @getshort(api/config/value.md) | diff --git a/sidebars.js b/sidebars.js index 4be1cb8..9792ec4 100644 --- a/sidebars.js +++ b/sidebars.js @@ -161,6 +161,7 @@ module.exports = { "api/config/layout-mode", "api/config/locale", "api/config/menubar", + "api/config/theme", "api/config/toolbar", "api/config/value" ] From bbfae27d0a4fa6f0c346b5cd7b7c42e997ff9831 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 26 Mar 2026 12:11:14 +0400 Subject: [PATCH 4/8] [update] check methods via AI (technical aspects) --- docs/api/methods/set-config.md | 2 +- docs/api/methods/set-locale.md | 2 +- docs/api/methods/set-value.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/api/methods/set-config.md b/docs/api/methods/set-config.md index d54fef0..40a40da 100644 --- a/docs/api/methods/set-config.md +++ b/docs/api/methods/set-config.md @@ -13,7 +13,7 @@ description: You can learn about the setConfig method in the documentation of th ### Usage ~~~jsx {} -setConfig(config: { [key:any]: any }): void; +setConfig(config: Partial): void; ~~~ ### Parameters diff --git a/docs/api/methods/set-locale.md b/docs/api/methods/set-locale.md index 55610c6..38afeb8 100644 --- a/docs/api/methods/set-locale.md +++ b/docs/api/methods/set-locale.md @@ -13,7 +13,7 @@ description: You can learn about the setLocale method in the documentation of th ### Usage ~~~jsx {} -setLocale(null | locale?: object): void; +setLocale(locale?: Record | null): void; ~~~ ### Parameters diff --git a/docs/api/methods/set-value.md b/docs/api/methods/set-value.md index 5d40f94..c738b2f 100644 --- a/docs/api/methods/set-value.md +++ b/docs/api/methods/set-value.md @@ -13,7 +13,7 @@ description: You can learn about the setValue method in the documentation of the ### Usage ~~~jsx {} -setValue: (value: string, encoder?: any): void; +setValue(value: string, encoder?: any): void; ~~~ ### Parameters From ffeaa1e850185681cad80bfce4adf1662861c2d8 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 26 Mar 2026 12:19:33 +0400 Subject: [PATCH 5/8] [update] check events via AI (technical aspects) --- docs/api/events/export.md | 10 ++++++---- docs/api/events/insert-image.md | 14 ++++++++++++++ docs/api/events/insert-link.md | 2 +- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/docs/api/events/export.md b/docs/api/events/export.md index 0691bd5..99b2632 100644 --- a/docs/api/events/export.md +++ b/docs/api/events/export.md @@ -27,10 +27,12 @@ interface IExportOptions { The callback of **export** event can take an object with the following parameters: -- `format` - a file format -- `url` - a base URL for file export -- `download` - allows a user to specify if he wants to download the file after receiving the response back from the server. If the property is set to "false", the file will not download, but the user will instead be able to get blob data from the event object (see the `result` prop in the event definition) -- `fileName` - a file name to be exported +- `options` - an object with export options: + - `format` - (optional) a file format: `"docx"` or `"pdf"` + - `url` - (optional) a base URL for file export + - `download` - (optional) allows a user to specify if he wants to download the file after receiving the response back from the server. If the property is set to `false`, the file will not download, but the user will instead be able to get blob data from the event object (see the `result` parameter) + - `fileName` - (optional) a file name to be exported +- `result` - (optional) the blob data returned from the server when `download` is set to `false` :::info For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) diff --git a/docs/api/events/insert-image.md b/docs/api/events/insert-image.md index 7898511..cf3146a 100644 --- a/docs/api/events/insert-image.md +++ b/docs/api/events/insert-image.md @@ -29,6 +29,20 @@ interface IImageContext { } ~~~ +### Parameters + +The callback of the **insert-image** event receives an `IImageContext` object with the following parameters: + +- `id` - the unique identifier of the image +- `value` - the image URL (src) +- `width` - the image width in pixels +- `height` - the image height in pixels +- `name` - (optional) the original file name +- `file` - (optional) the `File` object from the uploader +- `status` - (optional) the upload status string +- `selected` - a callback invoked when the image is selected; receives the `IImageContext` object +- `uploaded` - a callback invoked when the image upload completes; receives the `IImageContext` object + :::info For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: diff --git a/docs/api/events/insert-link.md b/docs/api/events/insert-link.md index 1db8b8d..1c5f7f9 100644 --- a/docs/api/events/insert-link.md +++ b/docs/api/events/insert-link.md @@ -18,7 +18,7 @@ description: You can learn about the insert-link event in the documentation of t ### Parameters -The callback of the **update-link** event can take an object with the following parameter: +The callback of the **insert-link** event can take an object with the following parameter: - `url` - the url to be inserted From 609deca3d4bc5dbbfc415e0af4f9f40d95920da6 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 26 Mar 2026 12:54:40 +0400 Subject: [PATCH 6/8] [update] check internal methods via AI (technical aspects) --- docs/api/internal/detach.md | 2 +- docs/api/internal/exec.md | 2 +- docs/api/internal/get-reactive-state.md | 2 +- docs/api/internal/get-state.md | 2 +- docs/api/internal/on.md | 7 +++++-- 5 files changed, 9 insertions(+), 6 deletions(-) diff --git a/docs/api/internal/detach.md b/docs/api/internal/detach.md index 4992e37..fcdcc8a 100644 --- a/docs/api/internal/detach.md +++ b/docs/api/internal/detach.md @@ -1,6 +1,6 @@ --- sidebar_label: api.detach() -title: on Method +title: detach Method description: You can learn about the on method in the documentation of the DHTMLX JavaScript RichText library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText. --- diff --git a/docs/api/internal/exec.md b/docs/api/internal/exec.md index ba0bcd0..418d3e8 100644 --- a/docs/api/internal/exec.md +++ b/docs/api/internal/exec.md @@ -22,7 +22,7 @@ api.exec( ### Parameters - `event` - (required) an event to be fired -- `config` - (required) the config object with parameters (see the event to be fired) +- `config` - (optional) the config object with parameters (see the event to be fired); omit for parameterless actions (e.g. `"undo"`, `"redo"`, `"print"`) ### Events diff --git a/docs/api/internal/get-reactive-state.md b/docs/api/internal/get-reactive-state.md index 3fc3830..d8384fd 100644 --- a/docs/api/internal/get-reactive-state.md +++ b/docs/api/internal/get-reactive-state.md @@ -25,7 +25,7 @@ The method returns an object with the following parameters: cursorState: { subscribe: any }, defaultStyles {...}, document {...}, - fullscreen {...}, + fullscreenMode {...}, history {...}, layoutMode {...}, popup {...}, diff --git a/docs/api/internal/get-state.md b/docs/api/internal/get-state.md index f666c91..14f7d73 100644 --- a/docs/api/internal/get-state.md +++ b/docs/api/internal/get-state.md @@ -25,7 +25,7 @@ The method returns an object with the following parameters: cursorState: {}, defaultStyles: {}, document: {}, - fullscreen: boolean, + fullscreenMode: boolean, history: [] layoutMode: string, popup: any, diff --git a/docs/api/internal/on.md b/docs/api/internal/on.md index 165aaa2..591844b 100644 --- a/docs/api/internal/on.md +++ b/docs/api/internal/on.md @@ -15,7 +15,8 @@ description: You can learn about the on method in the documentation of the DHTML ~~~jsx {} api.on( event: string, - handler: function + handler: function, + options?: { tag?: string } ): void; ~~~ @@ -23,6 +24,8 @@ api.on( - `event` - (required) an event to be fired - `handler` - (required) a handler to be attached (the handler arguments will depend on the event to be fired) +- `options` - (optional) an object with the following property: + - `tag` - (optional) a string label used to group handlers; pass the same tag to [`api.detach()`](api/internal/detach.md) to remove all handlers with that tag at once ### Events @@ -43,4 +46,4 @@ editor.api.on("set-font-size", (obj) => { }); ~~~ -**Change log:** The method was updated in v2.0. The `context` parameter were removed +**Change log:** The method was updated in v2.0. The `context` parameter was removed From cd88536a809447f81b62964e2b71ccc4fa66da6a Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 26 Mar 2026 13:30:24 +0400 Subject: [PATCH 7/8] [update] check configuration guides via AI (technical aspects) --- docs/guides/configuration.md | 19 +++++++++++++------ docs/guides/initialization.md | 4 ++-- docs/guides/localization.md | 13 +++++++++++-- docs/guides/stylization.md | 16 ++++++++++++++-- docs/guides/typescript_support.md | 29 +++++++++++++++++++++++++++++ 5 files changed, 69 insertions(+), 12 deletions(-) diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index f782c3a..b443611 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -15,6 +15,8 @@ You can configure RichText appearance and functionality via the corresponding AP - Specify **initial value** using the [`value`](api/config/value.md) property - Specify **initial locale** using the [`locale`](api/config/locale.md) property - Apply **initial styles** using the [`defaultStyles`](api/config/default-styles.md) property +- Set the **image upload URL** using the [`imageUploadUrl`](api/config/image-upload-url.md) property +- Apply a visual **theme** using the [`theme`](api/config/theme.md) property ## Layout modes @@ -44,7 +46,7 @@ const editor = new richtext.Richtext("#root", { The RichText toolbar consists of several blocks of controls that can be changed according to your needs. -### Default toolbar controls +### Available toolbar controls You can specify the following buttons and controls in the RichText toolbar: @@ -127,15 +129,20 @@ new richtext.Richtext("#root", { ### Custom toolbar controls -You can also specify custom controls as objects in the [`toolbar`](api/config/toolbar.md) property with the following parameters: +You can also specify custom controls as objects in the [`toolbar`](api/config/toolbar.md) property. Custom buttons must use `type: "button"` and support the following parameters: -- `type` - (required) specifies a custom control type. The following types are available: `"button"`, `"richselect"`, `"colorpicker"` -- `id` - (optional) a custom control ID (cannot overlap with existing control ID) +- `type` - (required) must be `"button"` for custom controls +- `id` - (optional) a custom control ID (cannot overlap with existing control IDs) +- `icon` - (optional) a CSS class name for the button icon (e.g., `"wxo-help"`) - `label` - (optional) a button label (combines with icon) -- `tooltip` - (optional) a tooltip displayed on hover (if not specified, uses the value from "label") -- `css` - (optional) a css class name assigned to the control (default supported classes: wx-primary, wx-secondary) +- `tooltip` - (optional) a tooltip displayed on hover (if not specified, uses the value from `label`) +- `css` - (optional) a CSS class name assigned to the control (default supported classes: `wx-primary`, `wx-secondary`) - `handler` - (optional) a callback function that executes when the button is clicked +:::note +`"richselect"` and `"colorpicker"` are internal types used only for **predefined** controls (e.g., `mode`, `style`). They cannot be used for custom controls. +::: + ~~~jsx {6-32} new richtext.Richtext("#root", { toolbar: [ diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md index a43bf9e..e1d4bec 100644 --- a/docs/guides/initialization.md +++ b/docs/guides/initialization.md @@ -40,10 +40,10 @@ Add a container for RichText and give it an ID, for example *"root"*: Initialize RichText with the `richtext.Richtext` constructor. The constructor takes two parameters: -- an HTML container (the ID of the HTML container) +- an HTML container — either a string with the ID of the HTML container or an `HTMLElement` object - an object with configuration properties. [See the full list here](#configuration-properties) -~~~jsx title="index.html" +~~~jsx title="index.js" // create RichText const editor = new richtext.Richtext("#root", { // configuration properties diff --git a/docs/guides/localization.md b/docs/guides/localization.md index f29e8cd..31eaba3 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -158,7 +158,16 @@ const en = { ~~~ :::info -Besides the default ***en*** locale (*English*), RichText also includes the built-in ***de*** (*German*) and ***cn*** (*Chinese*) ones. +Besides the default ***en*** locale (*English*), RichText also includes the built-in ***de*** (*German*) and ***cn*** (*Chinese*) ones. You can apply them directly without copying the locale object: + +~~~jsx +// npm +import { locales } from '@dhx/richtext'; +editor.setLocale(locales.de); + +// CDN +editor.setLocale(richtext.locales.de); +~~~ :::
@@ -463,7 +472,7 @@ const cn = { To apply a custom locale you need to: -- create a custom locale (or modify the default one) and provide translations for all text labels (it can be any language you need) +- create a custom locale (or modify the default one) and provide translations for the text labels you need (missing keys will fall back to English) - apply the new locale to **RichText** via its [`locale`](api/config/locale.md) property or use the [`setLocale()`](api/methods/set-locale.md) method diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index e14c464..fd71a58 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -8,7 +8,19 @@ description: You can learn about the styling in the documentation of the DHTMLX You can fully customize the appearance of DHTMLX RichText by overriding CSS variables and applying custom styles to specific parts of the widget. -This guide shows how to apply a **dark theme** and use available class names to style the editor’s menubar, toolbar, popup, and content area. +## Applying a built-in theme + +The quickest way to change the visual appearance is to use the [`theme`](api/config/theme.md) configuration property, which applies a ready-made theme: + +```js +new richtext.Richtext("#root", { + theme: { name: "dark", fonts: true } +}); +``` + +The `fonts` option controls whether the fonts bundled with the theme are loaded automatically. + +This guide also shows how to go further and use CSS variables and class names to style the editor’s menubar, toolbar, popup, and content area. ## Default structure and class names @@ -86,4 +98,4 @@ In this snippet you can see how to apply a custom style to RichText: -**Related articles:** [Customization](guides/configuration.md) +**Related articles:** [Configuration](guides/configuration.md) diff --git a/docs/guides/typescript_support.md b/docs/guides/typescript_support.md index ad247d8..78407f7 100644 --- a/docs/guides/typescript_support.md +++ b/docs/guides/typescript_support.md @@ -19,3 +19,32 @@ Why do you need to use DHTMLX RichText with TypeScript? The main benefit of TypeScript is that it allows you to significantly increase the efficiency of the development process. The way of building an application becomes more robust as checking the types together with autocompletion allow you to avoid potential mistakes. Besides, TypeScript provides you with information about types of data you should use while working with the API of the DHTMLX RichText library. + +## Initializing with TypeScript + +Import the `Richtext` class and the required types from the package: + +~~~jsx +import { Richtext } from '@dhx/richtext'; +import type { IRichtextConfig } from '@dhx/richtext'; + +const config: IRichtextConfig = { + value: "

Hello world

", + toolbar: true, + menubar: false, + layoutMode: "document" +}; + +const editor = new Richtext("#root", config); +~~~ + +## Available types + +The following TypeScript types and interfaces are exported from the package: + +| Type | Description | +|------|-------------| +| `IRichtextConfig` | Configuration object passed to the constructor or `setConfig()` | +| `IImageContext` | Image object used in the `insert-image` event and `api.exec("insert-image", ...)` | +| `IExportOptions` | Options object for `api.exec("export", { options: IExportOptions })` | +| `TBlockType` | Union of block tag names: `"p"` \| `"h1"` \| `"h2"` \| `"h3"` \| `"h4"` \| `"h5"` \| `"h6"` \| `"blockquote"` | From 9b686f9db183a30a443322afd8ec98bbe2395a21 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 26 Mar 2026 21:18:15 +0400 Subject: [PATCH 8/8] [update] check integration guides via AI (technical aspects) --- docs/guides/integration_with_angular.md | 6 +++--- docs/guides/integration_with_svelte.md | 6 +++--- docs/guides/integration_with_vue.md | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md index 5525455..ff79f1a 100644 --- a/docs/guides/integration_with_angular.md +++ b/docs/guides/integration_with_angular.md @@ -172,7 +172,7 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} export class RichTextComponent implements OnInit, OnDestroy { @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; - private _editor!: RichText; + private _editor!: Richtext; ngOnInit() { const { value } = getData(); // initialize data property @@ -207,7 +207,7 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} export class RichTextComponent implements OnInit, OnDestroy { @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; - private _editor!: RichText; + private _editor!: Richtext; ngOnInit() { const { value } = getData(); // initialize data property @@ -216,7 +216,7 @@ export class RichTextComponent implements OnInit, OnDestroy { }); // apply the data via the setValue() method - this._editor.setValue({ value }); + this._editor.setValue(value); } ngOnDestroy(): void { diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md index db9839f..383444c 100644 --- a/docs/guides/integration_with_svelte.md +++ b/docs/guides/integration_with_svelte.md @@ -89,7 +89,7 @@ import 'dhx-richtext-package/dist/richtext.css'; ~~~ In this tutorial you can see how to configure the **trial** version of RichText. @@ -126,7 +126,7 @@ onDestroy(() => { To add data into the RichText, we need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it: -~~~jsx {} title="data.ts" +~~~jsx {} title="data.js" export function getData() { const value = `

RichText 2.0

@@ -179,7 +179,7 @@ onDestroy(() => { ~~~ -You can also use the [`setValue()`](/api/methods/set-value.md) method inside the `onMount()` method of Svelte to load data into RichText: +You can also use the [`setValue()`](api/methods/set-value.md) method inside the `onMount()` method of Svelte to load data into RichText: ~~~html {} title="Richtext.svelte"