diff --git a/15/umbraco-cms/customizing/umbraco-package.md b/15/umbraco-cms/customizing/umbraco-package.md index e48638e5615..6a1b1b9082f 100644 --- a/15/umbraco-cms/customizing/umbraco-package.md +++ b/15/umbraco-cms/customizing/umbraco-package.md @@ -163,6 +163,9 @@ These are the current types of UI Extensions: | 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. | 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 %} 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 1f04c0dce9e..fc27c3e8116 100644 --- a/16/umbraco-cms/customizing/development-flow/vite-package-setup.md +++ b/16/umbraco-cms/customizing/development-flow/vite-package-setup.md @@ -59,16 +59,16 @@ 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). {% endhint %} -5. Install the Umbraco Backoffice package: +5. 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 ``` -6. To avoid installing additional dependencies such as TinyMCE or Monaco Editor,use the `--legacy-peer-deps` flag: +6. To avoid installing Umbraco’s sub-dependencies such as the entire Monaco Editor, use the `--legacy-peer-deps` flag: ```bash -npm install --legacy-peer-deps -D @umbraco-cms/backoffice +npm install --legacy-peer-deps -D @umbraco-cms/backoffice@x.x.x ``` This disables IntelliSense for external references but keeps the install lean. 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. | 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); } ``` 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` 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..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 @@ -21,19 +21,20 @@ 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 | - -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/). +| 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 | + +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 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 |