diff --git a/doc/administration/integration/diagrams_net.md b/doc/administration/integration/diagrams_net.md index a4e8528fb25e214324cf503036570141b325bc9e..335b26565e6dc45c1372f82c51677d613f030b25 100644 --- a/doc/administration/integration/diagrams_net.md +++ b/doc/administration/integration/diagrams_net.md @@ -8,7 +8,7 @@ type: reference, howto # Diagrams.net **(FREE)** With the [diagrams.net](https://www.diagrams.net/) integration, you can create and embed SVG diagrams in wikis. -The diagram editor is available in both the Markdown editor and the content editor. +The diagram editor is available in both the plain text editor and the rich text editor. On GitLab.com, this integration is enabled for all SaaS users and does not require any additional configuration. diff --git a/doc/development/fe_guide/content_editor.md b/doc/development/fe_guide/content_editor.md index 25140a067ca472baa478f31160947e2b925f2e6b..fdeabc99ea4ed852c6915fd8e97ebcb87cbc87f0 100644 --- a/doc/development/fe_guide/content_editor.md +++ b/doc/development/fe_guide/content_editor.md @@ -4,27 +4,27 @@ group: Knowledge info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments --- -# Content Editor development guidelines +# Rich text editor development guidelines -The Content Editor is a UI component that provides a WYSIWYG editing +The rich text editor is a UI component that provides a WYSIWYG editing experience for [GitLab Flavored Markdown](../../user/markdown.md) in the GitLab application. It also serves as the foundation for implementing Markdown-focused editors that target other engines, like static site generators. We use [Tiptap 2.0](https://tiptap.dev/) and [ProseMirror](https://prosemirror.net/) -to build the Content Editor. These frameworks provide a level of abstraction on top of +to build the rich text editor. These frameworks provide a level of abstraction on top of the native [`contenteditable`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content) web technology. ## Usage guide -Follow these instructions to include the Content Editor in a feature. +Follow these instructions to include the rich text editor in a feature. -1. [Include the Content Editor component](#include-the-content-editor-component). +1. [Include the rich text editor component](#include-the-rich-text-editor-component). 1. [Set and get Markdown](#set-and-get-markdown). 1. [Listen for changes](#listen-for-changes). -### Include the Content Editor component +### Include the rich text editor component Import the `ContentEditor` Vue component. We recommend using asynchronous named imports to take advantage of caching, as the ContentEditor is a big dependency. @@ -43,7 +43,7 @@ export default { ``` -The Content Editor requires two properties: +The rich text editor requires two properties: - `renderMarkdown` is an asynchronous function that returns the response (String) of invoking the [Markdown API](../../api/markdown.md). @@ -95,7 +95,7 @@ export default { ### Listen for changes -You can still react to changes in the Content Editor. Reacting to changes helps +You can still react to changes in the rich text editor. Reacting to changes helps you know if the document is empty or dirty. Use the `@change` event handler for this purpose. @@ -131,7 +131,7 @@ export default { ## Implementation guide -The Content Editor is composed of three main layers: +The rich text editor is composed of three main layers: - **The editing tools UI**, like the toolbar and the table structure editor. They display the editor's state and mutate it by dispatching commands. @@ -163,7 +163,7 @@ We implement [node views](https://tiptap.dev/guide/node-views/vue/#node-views-wi to provide inline editing tools for some content types, like tables and images. Node views allow separating the presentation of a content type from its [model](https://prosemirror.net/docs/guide/#doc.data_structures). Using a Vue component in -the presentation layer enables sophisticated editing experiences in the Content Editor. +the presentation layer enables sophisticated editing experiences in the rich text editor. Node views are located in `~/content_editor/components/wrappers`. #### Dispatch commands @@ -248,19 +248,19 @@ export default { The Tiptap [Editor](https://tiptap.dev/api/editor) class manages the editor's state and encapsulates all the business logic that powers -the Content Editor. The Content Editor constructs a new instance of this class and +the rich text editor. The rich text editor constructs a new instance of this class and provides all the necessary extensions to support [GitLab Flavored Markdown](../../user/markdown.md). #### Implement new extensions -Extensions are the building blocks of the Content Editor. You can learn how to implement +Extensions are the building blocks of the rich text editor. You can learn how to implement new ones by reading [the Tiptap guide](https://tiptap.dev/guide/custom-extensions). We recommend checking the list of built-in [nodes](https://tiptap.dev/api/nodes) and [marks](https://tiptap.dev/api/marks) before implementing a new extension from scratch. -Store the Content Editor extensions in the `~/content_editor/extensions` directory. +Store the rich text editor extensions in the `~/content_editor/extensions` directory. When using a Tiptap built-in extension, wrap it in a ES6 module inside this directory: ```javascript @@ -313,11 +313,11 @@ by first rendering the Markdown as HTML using the [Markdown API endpoint](../../ ```mermaid sequenceDiagram - participant A as Content Editor - participant E as Tiptap Object - participant B as Markdown Serializer + participant A as rich text editor + participant E as Tiptap object + participant B as Markdown serializer participant C as Markdown API - participant D as ProseMirror Parser + participant D as ProseMirror parser A->>B: deserialize(markdown) B->>C: render(markdown) C-->>B: html @@ -343,13 +343,13 @@ classes documentation before implementing a serializer: ```mermaid sequenceDiagram - participant A as Content Editor - participant B as Markdown Serializer + participant A as rich text editor + participant B as Markdown serializer participant C as ProseMirror Markdown A->>B: serialize(document) B->>C: serialize(document, serializers) - C-->>A: markdown string + C-->>A: Markdown string ``` `prosemirror-markdown` requires implementing a serializer function for each content type supported -by the Content Editor. We implement serializers in `~/content_editor/services/markdown_serializer.js`. +by the rich text editor. We implement serializers in `~/content_editor/services/markdown_serializer.js`. diff --git a/doc/development/fe_guide/index.md b/doc/development/fe_guide/index.md index 3d05d395ef1e41f15efd9e1146c9a4de599b56f7..c9e8a38f63b78ec2886a8cc1eb6a7fb581150aac 100644 --- a/doc/development/fe_guide/index.md +++ b/doc/development/fe_guide/index.md @@ -108,8 +108,8 @@ How we implement [keyboard shortcuts](keyboard_shortcuts.md) that can be customi ## Editors -GitLab text editing experiences are provided by the [Source Editor](source_editor.md) and -the [Content Editor](content_editor.md). +GitLab text editing experiences are provided by the [source editor](source_editor.md) and +the [rich text editor](content_editor.md). ## Frontend FAQ diff --git a/doc/development/gitlab_flavored_markdown/specification_guide/index.md b/doc/development/gitlab_flavored_markdown/specification_guide/index.md index ae78daa368778cbb06957ccd9afd96c45120009d..99cf344a45e0c58baff548916b70795adea10b01 100644 --- a/doc/development/gitlab_flavored_markdown/specification_guide/index.md +++ b/doc/development/gitlab_flavored_markdown/specification_guide/index.md @@ -297,9 +297,9 @@ The Markdown dialect used in the GitLab application has a dual requirement for r 1. Rendering to static read-only HTML format, to be displayed in various places throughout the application. 1. Rendering editable content in the - [Content Editor](https://about.gitlab.com/direction/plan/knowledge/content_editor/), + [rich text editor](https://about.gitlab.com/direction/plan/knowledge/content_editor/), a ["What You See Is What You Get" (WYSIWYG)](https://en.wikipedia.org/wiki/WYSIWYG) - editor. The Content Editor supports real-time instant switching between an editable + editor. The rich text editor supports real-time instant switching between an editable Markdown source and an editable WYSIWYG document. These requirements means that GitLab has two independent parser and renderer @@ -312,14 +312,14 @@ implementations: GitHub's fork of the reference parser for CommonMark. `libcmark-gfm` is an extended version of the C reference implementation of [CommonMark](https://commonmark.org/) 1. The frontend parser / renderer supports parsing and _WYSIWYG_ rendering for - the Content Editor. It is implemented in JavaScript. Parsing is based on the + the rich text editor. It is implemented in JavaScript. Parsing is based on the [Remark](https://github.com/remarkjs/remark) Markdown parser, which produces a MDAST Abstract Syntax Tree (MDAST). Rendering is the process of turning an MDAST into a [ProseMirror document](../../fe_guide/content_editor.md). Then, ProseMirror is used to render a ProseMirror document to WYSIWYG HTML. In this document, we refer to the process of turning Markdown into an MDAST as the _frontend / JavaScript parser_, and the entire process of rendering Markdown - to WYSIWYG HTML in ProseMirror as the _Content Editor_. Several + to WYSIWYG HTML in ProseMirror as the _rich text editor_. Several requirements drive the need for an independent frontend parser / renderer implementation, including: 1. Lack of necessary support for accurate source mapping in the HTML renderer @@ -356,7 +356,7 @@ used when running [Markdown snapshot testing](#markdown-snapshot-testing). #### WYSIWYG HTML -**WYSIWYG HTML** is HTML produced by the frontend (JavaScript) Content Editor, +**WYSIWYG HTML** is HTML produced by the frontend (JavaScript) rich text editor, which includes parsing and rendering logic. It is used to present an editable document in the ProseMirror WYSIWYG editor. @@ -554,9 +554,9 @@ specification and testing infrastructure: 1. The frontend (JavaScript) parser and renderer (which includes GitLab custom code and Remark) can convert Markdown to the expected ProseMirror JSON representing a ProseMirror document. - 1. The **Content Editor** (which includes the frontend (JavaScript) parser and renderer, + 1. The **rich text editor** (which includes the frontend (JavaScript) parser and renderer, and ProseMirror) can convert Markdown to the expected custom WYSIWYG HTML as rendered by ProseMirror. - 1. The **Content Editor** can complete a round-trip test, which involves converting + 1. The **rich text editor** can complete a round-trip test, which involves converting from Markdown, to MDAST, to ProseMirror Document, then back to Markdown. It ensures the resulting Markdown is exactly identical, with no differences. @@ -1329,7 +1329,7 @@ Three types of entries exist, with different HTML for each: - **WYSIWYG** - The WYSIWYG (frontend, JavaScript-generated) HTML for each entry in `glfm_specification/output_example_snapshots/examples_index.yml`. - - It is generated (or updated) from the frontend Content Editor implementation via the + - It is generated (or updated) from the frontend rich text editor implementation via the `update-example-snapshots.rb` script. It can be manually updated for WYSIWYG examples with incomplete implementations. diff --git a/doc/user/markdown.md b/doc/user/markdown.md index 60f32bef3f2a7d775c0ba88ab66dfb374ed85d1c..1d889d752850b290b675d5c381ab4bc8732ef43d 100644 --- a/doc/user/markdown.md +++ b/doc/user/markdown.md @@ -569,13 +569,13 @@ This example links to `/miscellaneous.md`: In wikis, you can use the [diagrams.net](https://www.diagrams.net/) editor to create diagrams. You can also edit diagrams created with the diagrams.net editor. The diagram editor is available in both -the Markdown editor and the content editor. +the plain text editor and the rich text editor. For more information, see [Diagrams.net](../administration/integration/diagrams_net.md). -##### Markdown editor +##### Plain text editor -To create a diagram in the Markdown editor: +To create a diagram in the plain text editor: 1. In the editor's toolbar, select **Insert or edit diagram** (**{diagram}**). 1. Use the diagrams.net editor to create the diagram. @@ -583,20 +583,20 @@ To create a diagram in the Markdown editor: A Markdown image reference to the diagram is inserted in the wiki content. -To edit a diagram in the Markdown editor: +To edit a diagram in the plain text editor: -1. Place the Markdown editor's text field cursor in a Markdown image reference +1. Place the plain text editor's text field cursor in a Markdown image reference that contains the diagram. -1. Select **Insert or edit diagram** (**{diagram}**) in the Markdown editor. +1. Select **Insert or edit diagram** (**{diagram}**) in the plain text editor. 1. Use the diagrams.net editor to edit the diagram. 1. Select **Save & exit**. A Markdown image reference to the diagram is inserted in the wiki content, replacing the previous diagram. -##### Content editor +##### Rich text editor -To create a diagram in the content editor: +To create a diagram in the rich text editor: 1. In the editor's toolbar, select **More options** (**{plus}**). 1. In the dropdown list, select **Create or edit diagram**. @@ -605,7 +605,7 @@ To create a diagram in the content editor: The diagram as visualized in the diagrams.net editor is inserted in the wiki content. -To edit a diagram in the content editor: +To edit a diagram in the rich text editor: 1. Select the diagram that you want to edit. 1. In the floating toolbar, select **Edit diagram** (**{diagram}**). diff --git a/doc/user/project/wiki/index.md b/doc/user/project/wiki/index.md index 0d3782cfd09067cfa7e230cd206414286682e7f3..5591d12f5cfe81f506c9709b18b888d8d2d329da 100644 --- a/doc/user/project/wiki/index.md +++ b/doc/user/project/wiki/index.md @@ -310,11 +310,12 @@ Previously added wiki pages are preserved in case you want to re-enable the wiki. To re-enable it, repeat the process to disable the wiki but toggle it on (in blue). -## Content Editor +## Rich text editor > - [Introduced](https://gitlab.com/groups/gitlab-org/-/epics/5643) in GitLab 14.0. > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/345398) switching between editing experiences in GitLab 14.7 [with a flag](../../../administration/feature_flags.md) named `wiki_switch_between_content_editor_raw_markdown`. Enabled by default. > - Switching between editing experiences generally available in GitLab 14.10. [Feature flag `wiki_switch_between_content_editor_raw_markdown`](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/83760) removed. +> - [Renamed](https://gitlab.com/gitlab-org/gitlab/-/issues/398152) from content editor to rich text editor in GitLab 16.2. GitLab provides a WYSIWYG editing experience for GitLab Flavored Markdown in wikis. @@ -327,12 +328,12 @@ Support includes: - Previewing Mermaid, PlantUML, and Kroki diagrams ([introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/86701) in GitLab 15.2). - Creating and editing HTML comments ([introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/104084) in GitLab 15.7). -### Use the Content Editor +### Use the rich text editor 1. [Create](#create-a-new-wiki-page) a new wiki page, or [edit](#edit-a-wiki-page) an existing one. 1. Select **Markdown** as your format. 1. Above **Content**, select **Edit rich text**. -1. Customize your page's content using the various formatting options available in the content editor. +1. Customize your page's content using the various formatting options available in the rich text editor. 1. Select **Create page** for a new page, or **Save changes** for an existing page. The rich text editing mode remains the default until you switch back to @@ -340,12 +341,12 @@ The rich text editing mode remains the default until you switch back to ### Switch back to the old editor -1. *If you're editing the page in the content editor,* scroll to **Content**. +1. *If you're editing the page in the rich text editor,* scroll to **Content**. 1. Select **Edit source**. ### GitLab Flavored Markdown support -Supporting all GitLab Flavored Markdown content types in the Content Editor is a work in progress. +Supporting all GitLab Flavored Markdown content types in the rich text editor is a work in progress. For the status of the ongoing development for CommonMark and GitLab Flavored Markdown support, read: - [Basic Markdown formatting extensions](https://gitlab.com/groups/gitlab-org/-/epics/5404) epic. diff --git a/doc/user/shortcuts.md b/doc/user/shortcuts.md index e195be5586a4e22fbc6994dbe743de12c562e9cb..d4688837e399fe7279e7e111da098a09514fb9e4 100644 --- a/doc/user/shortcuts.md +++ b/doc/user/shortcuts.md @@ -238,10 +238,10 @@ This shortcut is available when viewing a [wiki page](project/wiki/index.md): |-------------------|-----------------| | e | Edit wiki page. | -### Content editor +### Rich text editor These shortcuts are available when editing a file with the -[Content Editor](https://about.gitlab.com/direction/plan/knowledge/content_editor/): +[rich text editor](https://about.gitlab.com/direction/plan/knowledge/content_editor/): | macOS shortcut | Windows shortcut | Description | |----------------|------------------|-------------| @@ -261,6 +261,7 @@ These shortcuts are available when editing a file with the | Command + i | Control + i | Italic | | Command + Shift + x | Control + Shift + x | Strikethrough | | Command + e | Control + e | Code | +| Command + k | Control + k | Insert a link | | Command + Alt + 0 | Control + Alt + 0 | Apply normal text style | | Command + Alt + 1 | Control + Alt + 1 | Apply heading style 1 | | Command + Alt + 2 | Control + Alt + 2 | Apply heading style 2 |