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
Hide 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
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://
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
the native
[
`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:
### Editing tools UI
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,
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
...
...
@@ -159,7 +159,7 @@ sequenceDiagram
#### 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
allow separating the presentation of a content type from its
[
model
](
https://prosemirror.net/docs/guide/#doc.data_structures
)
. Using a Vue component in
...
...
@@ -209,7 +209,7 @@ the following events:
-
`blur`
-
`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
<script>
...
...
@@ -246,7 +246,7 @@ export default {
### 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 Content Editor. The Content Editor constructs a new instance of this class and
provides all the necessary extensions to support
...
...
@@ -255,9 +255,9 @@ provides all the necessary extensions to support
#### Implement new extensions
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
)
.
We recommend checking the list of built-in
[
nodes
](
https://
www.
tiptap.dev/api/nodes
)
and
[
marks
](
https://
www.
tiptap.dev/api/marks
)
before implementing a new extension
new ones by reading
[
Tiptap's 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.
...
...
@@ -326,8 +326,8 @@ sequenceDiagram
```
Deserializers live in the extension modules. Read Tiptap's
[
parseHTML
](
https://
www.
tiptap.dev/guide/custom-extensions#parse-html
)
and
[
addAttributes
](
https://
www.
tiptap.dev/guide/custom-extensions#attributes
)
documentation to
[
parseHTML
](
https://tiptap.dev/guide/custom-extensions#parse-html
)
and
[
addAttributes
](
https://tiptap.dev/guide/custom-extensions#attributes
)
documentation to
learn how to implement them. Titap's API is a wrapper around ProseMirror's
[
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