Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
52ea4cbf
Commit
52ea4cbf
authored
Oct 17, 2021
by
Suzanne Selhorn
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Fixed broken external links
Related to:
https://gitlab.com/gitlab-org/technical-writing/-/issues/492
parent
a6101523
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
10 additions
and
10 deletions
+10
-10
doc/development/fe_guide/content_editor.md
doc/development/fe_guide/content_editor.md
+10
-10
No files found.
doc/development/fe_guide/content_editor.md
View file @
52ea4cbf
...
@@ -11,7 +11,7 @@ experience for [GitLab Flavored Markdown](../../user/markdown.md) in the GitLab
...
@@ -11,7 +11,7 @@ experience for [GitLab Flavored Markdown](../../user/markdown.md) in the GitLab
It also serves as the foundation for implementing Markdown-focused editors
It also serves as the foundation for implementing Markdown-focused editors
that target other engines, like static site generators.
that target other engines, like static site generators.
We use
[
tiptap 2.0
](
https://
www.
tiptap.dev/
)
and
[
ProseMirror
](
https://prosemirror.net/
)
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 Content Editor. These frameworks provide a level of abstraction on top of
the native
the native
[
`contenteditable`
](
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
)
web technology.
[
`contenteditable`
](
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
)
web technology.
...
@@ -143,7 +143,7 @@ The Content Editor is composed of three main layers:
...
@@ -143,7 +143,7 @@ The Content Editor is composed of three main layers:
### Editing tools UI
### Editing tools UI
The editing tools UI are Vue components that display the editor's state and
The editing tools UI are Vue components that display the editor's state and
dispatch
[
commands
](
https://
www.
tiptap.dev/api/commands/#commands
)
to mutate it.
dispatch
[
commands
](
https://tiptap.dev/api/commands/#commands
)
to mutate it.
They are located in the
`~/content_editor/components`
directory. For example,
They are located in the
`~/content_editor/components`
directory. For example,
the
**Bold**
toolbar button displays the editor's state by becoming active when
the
**Bold**
toolbar button displays the editor's state by becoming active when
the user selects bold text. This button also dispatches the
`toggleBold`
command
the user selects bold text. This button also dispatches the
`toggleBold`
command
...
@@ -159,7 +159,7 @@ sequenceDiagram
...
@@ -159,7 +159,7 @@ sequenceDiagram
#### Node views
#### Node views
We implement
[
node views
](
https://
www.
tiptap.dev/guide/node-views/vue/#node-views-with-vue
)
We implement
[
node views
](
https://tiptap.dev/guide/node-views/vue/#node-views-with-vue
)
to provide inline editing tools for some content types, like tables and images. Node views
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
allow separating the presentation of a content type from its
[
model
](
https://prosemirror.net/docs/guide/#doc.data_structures
)
. Using a Vue component in
[
model
](
https://prosemirror.net/docs/guide/#doc.data_structures
)
. Using a Vue component in
...
@@ -209,7 +209,7 @@ the following events:
...
@@ -209,7 +209,7 @@ the following events:
-
`blur`
-
`blur`
-
`error`
.
-
`error`
.
Learn more about these events in
[
Tiptap's event guide
](
https://
www.
tiptap.dev/api/events/
)
.
Learn more about these events in
[
Tiptap's event guide
](
https://tiptap.dev/api/events/
)
.
```
html
```
html
<script>
<script>
...
@@ -246,7 +246,7 @@ export default {
...
@@ -246,7 +246,7 @@ export default {
### The Tiptap editor object
### The Tiptap editor object
The Tiptap
[
Editor
](
https://
www.
tiptap.dev/api/editor
)
class manages
The Tiptap
[
Editor
](
https://tiptap.dev/api/editor
)
class manages
the editor's state and encapsulates all the business logic that powers
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 Content Editor. The Content Editor constructs a new instance of this class and
provides all the necessary extensions to support
provides all the necessary extensions to support
...
@@ -255,9 +255,9 @@ provides all the necessary extensions to support
...
@@ -255,9 +255,9 @@ provides all the necessary extensions to support
#### Implement new extensions
#### 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 Content Editor. You can learn how to implement
new ones by reading
[
Tiptap's guide
](
https://
www.
tiptap.dev/guide/custom-extensions
)
.
new ones by reading
[
Tiptap's guide
](
https://tiptap.dev/guide/custom-extensions
)
.
We recommend checking the list of built-in
[
nodes
](
https://
www.
tiptap.dev/api/nodes
)
and
We recommend checking the list of built-in
[
nodes
](
https://tiptap.dev/api/nodes
)
and
[
marks
](
https://
www.
tiptap.dev/api/marks
)
before implementing a new extension
[
marks
](
https://tiptap.dev/api/marks
)
before implementing a new extension
from scratch.
from scratch.
Store the Content Editor extensions in the
`~/content_editor/extensions`
directory.
Store the Content Editor extensions in the
`~/content_editor/extensions`
directory.
...
@@ -326,8 +326,8 @@ sequenceDiagram
...
@@ -326,8 +326,8 @@ sequenceDiagram
```
```
Deserializers live in the extension modules. Read Tiptap's
Deserializers live in the extension modules. Read Tiptap's
[
parseHTML
](
https://
www.
tiptap.dev/guide/custom-extensions#parse-html
)
and
[
parseHTML
](
https://tiptap.dev/guide/custom-extensions#parse-html
)
and
[
addAttributes
](
https://
www.
tiptap.dev/guide/custom-extensions#attributes
)
documentation to
[
addAttributes
](
https://tiptap.dev/guide/custom-extensions#attributes
)
documentation to
learn how to implement them. Titap's API is a wrapper around ProseMirror's
learn how to implement them. Titap's API is a wrapper around ProseMirror's
[
schema spec API
](
https://prosemirror.net/docs/ref/#model.SchemaSpec
)
.
[
schema spec API
](
https://prosemirror.net/docs/ref/#model.SchemaSpec
)
.
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment