From 4183849445cc63516ef3f73b8e0a0dc6d754a218 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 2 May 2025 16:43:05 +0200 Subject: [PATCH 01/11] docs: document tiptap extensions --- 15/umbraco-cms/customizing/umbraco-package.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/15/umbraco-cms/customizing/umbraco-package.md b/15/umbraco-cms/customizing/umbraco-package.md index e48638e5615..a4d91666b36 100644 --- a/15/umbraco-cms/customizing/umbraco-package.md +++ b/15/umbraco-cms/customizing/umbraco-package.md @@ -162,7 +162,9 @@ These are the current types of UI Extensions: | searchProvider | A search provider is a provider that can be used to provide search results for the search bar in the Backoffice. | | searchResultItem | A search result item is a component that can be added to the search results. | | theme | A theme is a set of styles that can be added to the Backoffice. The user can select their preferred theme in the current user modal. | -| tinyMcePlugin | A TinyMCE plugin is a plugin that can be added to the TinyMCE editor. Read more about [TinyMCE Plugins](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/plugins.md). | +| tiptapExtension | A Tiptap extension is a component that can be added to the [Rich text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md). | +| tiptapToolbarExtension | A Tiptap toolbar extension is a component that can be added to the toolbar of the [Rich text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md). | +| tiptapStatusbarExtension | A Tiptap status bar extension is a component that can be added to the status bar of the [Rich text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md). | | treeItem | A tree item that can be added to the tree. | | tree | A tree that can be added to a section. | | ufmComponent | This type of component is a formatter that can be added to the [Umbraco Flavoured Markdown](../reference/umbraco-flavored-markdown.md), which is used in property descriptions and advanced labels. | From ce3c7109e52cf157233ab1147bc1a2929ed4c43e Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 2 May 2025 16:43:22 +0200 Subject: [PATCH 02/11] docs: document which version to install --- .../customizing/development-flow/vite-package-setup.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/16/umbraco-cms/customizing/development-flow/vite-package-setup.md b/16/umbraco-cms/customizing/development-flow/vite-package-setup.md index 8c4097981a3..0ffbfbc756c 100644 --- a/16/umbraco-cms/customizing/development-flow/vite-package-setup.md +++ b/16/umbraco-cms/customizing/development-flow/vite-package-setup.md @@ -59,18 +59,18 @@ npm install Before proceeding, ensure that you install the version of the Backoffice package compatible with your Umbraco installation. You can find the appropriate version on the [@umbraco-cms/backoffice npm page](https://www.npmjs.com/package/@umbraco-cms/backoffice). -6. Install the Backoffice package using the following command: +6. Install the Backoffice package using the following command, where `x.x.x` should be replaced with your Umbraco version: ```bash -npm install -D @umbraco-cms/backoffice +npm install -D @umbraco-cms/backoffice@x.x.x ``` {% hint style="info" %} -To avoid installing Umbraco’s sub-dependencies such as TinyMCE and Monaco Editor, you can add the `--legacy-peer-deps` flag: +To avoid installing Umbraco’s sub-dependencies such as the entire Monaco Editor, you can add the `--legacy-peer-deps` flag: {% endhint %} ```bash -npm install --legacy-peer-deps -D @umbraco-cms/backoffice +npm install --legacy-peer-deps -D @umbraco-cms/backoffice@x.x.x ``` Using this flag will disable Intellisense for external references. From 80ef7e47b35717181f87fd04553797848b9a789b Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 2 May 2025 16:43:31 +0200 Subject: [PATCH 03/11] docs: removes reference to tinymce --- .../built-in-umbraco-property-editors/markdown-editor.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/markdown-editor.md b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/markdown-editor.md index 67c298f50f5..e257590adc0 100644 --- a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/markdown-editor.md +++ b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/markdown-editor.md @@ -6,7 +6,7 @@ `Returns: System.Web.HtmlString` -This built-in editor allow the user to use the markdown formatting options, from within a tinyMCE-like interface. +This built-in editor allow the user to use the markdown formatting options, from within a rich text editor-like interface. ## Data Type Definition Example @@ -84,8 +84,8 @@ The example below demonstrates how to add values programmatically using a Razor // Create markdown value var markdownValue = new HtmlString("#heading \n**strong text**"); - - // Set the value of the property with alias 'myMarkdownEditor'. + + // Set the value of the property with alias 'myMarkdownEditor'. content.SetValue("myMarkdownEditor", markdownValue); // Save the change @@ -98,7 +98,7 @@ Although the use of a GUID is preferable, you can also use the numeric ID to get ```csharp @{ // Get the page using it's id - var content = contentService.GetById(1234); + var content = contentService.GetById(1234); } ``` From ff43260f2cadb682d4e95fe2cb91d3a405f09bac Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 2 May 2025 16:43:43 +0200 Subject: [PATCH 04/11] docs: remove one old limitation --- .../rich-text-editor/README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md index 2ec74dbffeb..8759ff25961 100644 --- a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md +++ b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md @@ -11,8 +11,6 @@ You can continue to use the [TinyMCE UI for the Rich Text Editor](../rich-text-e **Current limitations** -The Tiptap UI currently does not support using custom styles for your rich text. - Resizing media images has not been implemented yet. {% endhint %} From 4be895aade42f8588469d8d4c0e507472ee5444f Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 2 May 2025 16:43:53 +0200 Subject: [PATCH 05/11] docs: formatting for schema and UI alias --- .../rich-text-editor/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md index 7018e9a31c5..2581fb20f77 100644 --- a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md +++ b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md @@ -1,6 +1,8 @@ # Rich Text Editor -`Schema Alias: Umbraco.RichText` `UI Alias: Umb.PropertyEditorUi.Tiptap` +`Schema Alias: Umbraco.RichText` + +`UI Alias: Umb.PropertyEditorUi.Tiptap` `Returns: HTML` From 1cbe46d4c3404276ef815594069a82ae67cd8e1d Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 2 May 2025 16:44:03 +0200 Subject: [PATCH 06/11] docs: change link from tinymce to tiptap --- .../tutorials/editors-manual/working-with-content/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/tutorials/editors-manual/working-with-content/README.md b/16/umbraco-cms/tutorials/editors-manual/working-with-content/README.md index 1bba66847a6..51eab47530e 100644 --- a/16/umbraco-cms/tutorials/editors-manual/working-with-content/README.md +++ b/16/umbraco-cms/tutorials/editors-manual/working-with-content/README.md @@ -33,7 +33,7 @@ To make your work easier, there are shortcut keys for certain editor functions. | Ctrl + Y | Redo | | Ctrl + Z | Undo | -We have listed only a few keyboard shortcuts. For a detailed list of available keyboard shortcuts, see the [TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/latest/keyboard-shortcuts/). +We have listed only a few keyboard shortcuts. For a detailed list of available keyboard shortcuts, see the [Tiptap Documentation](https://tiptap.dev/docs/editor/core-concepts/keyboard-shortcuts). ## View Source Code From dbee7518ba75bd058a3186d3b9bcbeb700f03659 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 2 May 2025 16:51:31 +0200 Subject: [PATCH 07/11] docs: updates documentation from tinymce to tiptap shortcuts --- .../working-with-content/README.md | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/16/umbraco-cms/tutorials/editors-manual/working-with-content/README.md b/16/umbraco-cms/tutorials/editors-manual/working-with-content/README.md index 51eab47530e..fb1d5446add 100644 --- a/16/umbraco-cms/tutorials/editors-manual/working-with-content/README.md +++ b/16/umbraco-cms/tutorials/editors-manual/working-with-content/README.md @@ -21,17 +21,18 @@ The Rich Text Editor is like any other word-processing program. You write the te To make your work easier, there are shortcut keys for certain editor functions. Use the following shortcut keys to carry out certain commands: -| Shortcut | Action | -| -------- | ---------- | -| Ctrl + A | Select all | -| Ctrl + B | Bold | -| Ctrl + C | Copy | -| Ctrl + I | Italic | -| Ctrl + U | Underline | -| Ctrl + V | Paste | -| Ctrl + X | Cut | -| Ctrl + Y | Redo | -| Ctrl + Z | Undo | +| Windows/Linux | MacOS | Action | +| -------- | -------- | ---------- | +| Ctrl + A | Cmd + A | Select all | +| Ctrl + B | Cmd + B | Bold | +| Ctrl + I | Cmd + I | Italic | +| Ctrl + U | Cmd + U | Underline | +| Ctrl + C | Cmd + C | Copy | +| Ctrl + V | Cmd + V | Paste | +| Ctrl + Shift + V | Cmd + Shift + V | Paste without formatting | +| Ctrl + X | Cmd + X | Cut | +| Ctrl + Z | Cmd + Z | Undo | +| Ctrl + Shift + Y | Cmd + Shift + Z | Redo | We have listed only a few keyboard shortcuts. For a detailed list of available keyboard shortcuts, see the [Tiptap Documentation](https://tiptap.dev/docs/editor/core-concepts/keyboard-shortcuts). From 46c76a8fc9cf4321e6a7ebda58f93d597461661a Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 2 May 2025 16:52:59 +0200 Subject: [PATCH 08/11] docs(forms): updates property editor ui alias from tinymce to tiptap --- 16/umbraco-forms/developer/extending/setting-types.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-forms/developer/extending/setting-types.md b/16/umbraco-forms/developer/extending/setting-types.md index 2c816b49142..32c02e06332 100644 --- a/16/umbraco-forms/developer/extending/setting-types.md +++ b/16/umbraco-forms/developer/extending/setting-types.md @@ -33,7 +33,7 @@ Some are defined with the Umbraco CMS and some ship with the Forms package. | Umb.PropertyEditorUi.Slider | CMS | Uses a slider for range input | The "reCAPTCHAv3" field type | | Umb.PropertyEditorUi.TextArea | CMS | Uses a multiline textbox for entry | | | Umb.PropertyEditorUi.TextBox | CMS | Uses a single-line textbox for entry | | -| Umb.PropertyEditorUi.TinyMCE | CMS | Uses a rich text editor for input | The "Send email" workflows | +| Umb.PropertyEditorUi.Tiptap | CMS | Uses a rich text editor for input | The "Send email" workflows | | Umb.PropertyEditorUi.Toggle | CMS | Uses a single checkbox for entry | | | Umb.PropertyEditorUi.UploadField | CMS | Used for selection of a file | The "Text file" prevalue source | | Forms.PropertyEditorUi.DataTypePicker | Forms | Uses a datatype picker | The "Umbraco prevalues" prevalue source | From 3d6ecc620f044640d26ade601548d7053c5872c6 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 2 May 2025 16:55:26 +0200 Subject: [PATCH 09/11] docs: revert removal of tinymce in V15 --- 15/umbraco-cms/customizing/umbraco-package.md | 1 + 1 file changed, 1 insertion(+) diff --git a/15/umbraco-cms/customizing/umbraco-package.md b/15/umbraco-cms/customizing/umbraco-package.md index a4d91666b36..6a1b1b9082f 100644 --- a/15/umbraco-cms/customizing/umbraco-package.md +++ b/15/umbraco-cms/customizing/umbraco-package.md @@ -162,6 +162,7 @@ These are the current types of UI Extensions: | searchProvider | A search provider is a provider that can be used to provide search results for the search bar in the Backoffice. | | searchResultItem | A search result item is a component that can be added to the search results. | | theme | A theme is a set of styles that can be added to the Backoffice. The user can select their preferred theme in the current user modal. | +| tinyMcePlugin | A TinyMCE plugin is a plugin that can be added to the TinyMCE editor. Read more about [TinyMCE Plugins](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/plugins.md). | | tiptapExtension | A Tiptap extension is a component that can be added to the [Rich text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md). | | tiptapToolbarExtension | A Tiptap toolbar extension is a component that can be added to the toolbar of the [Rich text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md). | | tiptapStatusbarExtension | A Tiptap status bar extension is a component that can be added to the status bar of the [Rich text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md). | From 2efdaa99fb937c2835b3f7016935db735ce772b6 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 2 May 2025 16:56:41 +0200 Subject: [PATCH 10/11] docs: copy V15 article for umbraco-package.md to V16 but with tinymcePlugin removed --- 16/umbraco-cms/customizing/umbraco-package.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/16/umbraco-cms/customizing/umbraco-package.md b/16/umbraco-cms/customizing/umbraco-package.md index dedd128eec4..a4d91666b36 100644 --- a/16/umbraco-cms/customizing/umbraco-package.md +++ b/16/umbraco-cms/customizing/umbraco-package.md @@ -162,6 +162,9 @@ These are the current types of UI Extensions: | searchProvider | A search provider is a provider that can be used to provide search results for the search bar in the Backoffice. | | searchResultItem | A search result item is a component that can be added to the search results. | | theme | A theme is a set of styles that can be added to the Backoffice. The user can select their preferred theme in the current user modal. | +| tiptapExtension | A Tiptap extension is a component that can be added to the [Rich text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md). | +| tiptapToolbarExtension | A Tiptap toolbar extension is a component that can be added to the toolbar of the [Rich text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md). | +| tiptapStatusbarExtension | A Tiptap status bar extension is a component that can be added to the status bar of the [Rich text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md). | | treeItem | A tree item that can be added to the tree. | | tree | A tree that can be added to a section. | | ufmComponent | This type of component is a formatter that can be added to the [Umbraco Flavoured Markdown](../reference/umbraco-flavored-markdown.md), which is used in property descriptions and advanced labels. | From 71c0572d40069690e6622636450cb52ae3a7d5ae Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Mon, 5 May 2025 11:04:11 +0200 Subject: [PATCH 11/11] Update 16/umbraco-cms/tutorials/editors-manual/working-with-content/README.md --- .../tutorials/editors-manual/working-with-content/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/tutorials/editors-manual/working-with-content/README.md b/16/umbraco-cms/tutorials/editors-manual/working-with-content/README.md index fb1d5446add..bac00a9a057 100644 --- a/16/umbraco-cms/tutorials/editors-manual/working-with-content/README.md +++ b/16/umbraco-cms/tutorials/editors-manual/working-with-content/README.md @@ -34,7 +34,7 @@ To make your work easier, there are shortcut keys for certain editor functions. | Ctrl + Z | Cmd + Z | Undo | | Ctrl + Shift + Y | Cmd + Shift + Z | Redo | -We have listed only a few keyboard shortcuts. For a detailed list of available keyboard shortcuts, see the [Tiptap Documentation](https://tiptap.dev/docs/editor/core-concepts/keyboard-shortcuts). +Only a few keyboard shortcuts are listed here. For a detailed list of available shortcuts, see the [Tiptap Documentation](https://tiptap.dev/docs/editor/core-concepts/keyboard-shortcuts). ## View Source Code