Commit e728550b authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch '325735-content-editor-commonmark' into 'master'

Add Commonmark support to Content Editor

See merge request gitlab-org/gitlab!58791
parents b17d8593 3db09091
import { CodeBlockHighlight as BaseCodeBlockHighlight } from 'tiptap-extensions';
export default class GlCodeBlockHighlight extends BaseCodeBlockHighlight {
get schema() {
const baseSchema = super.schema;
return {
...baseSchema,
attrs: {
params: {
default: null,
},
},
parseDOM: [
{
tag: 'pre',
preserveWhitespace: 'full',
getAttrs: (node) => {
const code = node.querySelector('code');
if (!code) {
return null;
}
return {
/* `params` is the name of the attribute that
prosemirror-markdown uses to extract the language
of a codeblock.
https://github.com/ProseMirror/prosemirror-markdown/blob/master/src/to_markdown.js#L62
*/
params: code.getAttribute('lang'),
};
},
},
],
};
}
}
import { isFunction, isString } from 'lodash';
import { Editor } from 'tiptap';
import { Bold, Code } from 'tiptap-extensions';
import {
Bold,
Italic,
Code,
Link,
Image,
Heading,
Blockquote,
HorizontalRule,
BulletList,
OrderedList,
ListItem,
} from 'tiptap-extensions';
import { PROVIDE_SERIALIZER_OR_RENDERER_ERROR } from '../constants';
import CodeBlockHighlight from '../extensions/code_block_highlight';
import createMarkdownSerializer from './markdown_serializer';
const createEditor = async ({ content, renderMarkdown, serializer: customSerializer } = {}) => {
......@@ -10,7 +23,20 @@ const createEditor = async ({ content, renderMarkdown, serializer: customSeriali
}
const editor = new Editor({
extensions: [new Bold(), new Code()],
extensions: [
new Bold(),
new Italic(),
new Code(),
new Link(),
new Image(),
new Heading({ levels: [1, 2, 3, 4, 5, 6] }),
new Blockquote(),
new HorizontalRule(),
new BulletList(),
new ListItem(),
new OrderedList(),
new CodeBlockHighlight(),
],
});
const serializer = customSerializer || createMarkdownSerializer({ render: renderMarkdown });
......
......@@ -60,9 +60,12 @@ const create = ({ render = () => null }) => {
// creates a bold alias for the strong mark converter
...defaultMarkdownSerializer.marks.strong,
},
italic: { open: '_', close: '_', mixable: true, expelEnclosingWhitespace: true },
});
return serializer.serialize(document);
return serializer.serialize(document, {
tightLists: true,
});
},
};
};
......
......@@ -4,5 +4,47 @@
---
- name: bold
markdown: '**bold**'
- name: code
- name: emphasis
markdown: '_emphasized text_'
- name: inline_code
markdown: '`code`'
- name: link
markdown: '[GitLab](https://gitlab.com)'
- name: code_block
markdown: |-
```javascript
console.log('hello world')
```
- name: headings
markdown: |-
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
- name: blockquote
markdown: |-
> This is a blockquote
>
> This is another one
- name: thematic_break
markdown: |-
---
- name: bullet_list
markdown: |-
* list item 1
* list item 2
* embedded list item 3
- name: ordered_list
markdown: |-
1. list item 1
2. list item 2
3. list item 3
- name: image
markdown: '![alt text](https://gitlab.com/logo.png)'
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment