Skip to content

Commit d36c302

Browse files
smsochnegsmsochneg
authored
chore: added toolbar to playground (#160)
1 parent ac896a3 commit d36c302

File tree

22 files changed

+875
-4
lines changed

22 files changed

+875
-4
lines changed

‎demo/Playground.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
&__editor-view {
3939
min-height: 100px;
4040
margin: 20px 0;
41+
padding-left: 4px;
4142
}
4243

4344
&__pm-selection {

‎demo/Playground.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ import {
1616
Extension,
1717
ReactRenderStorage,
1818
ReactRendererComponent,
19+
FlexToolbar,
1920
} from '../src';
21+
import {wHiddenData, wToolbarConfig} from '../src/toolbar/config/wysiwyg';
22+
2023
import {PlaygroundHtmlPreview} from './HtmlPreview';
2124
import {ProseMirrorDevTools} from './ProseMirrorDevTools';
2225
import {PMSelection} from './PMSelection';
@@ -172,7 +175,14 @@ const Playground = React.memo<PlaygroundProps>((props) => {
172175
</div>
173176
<hr />
174177
<div className={b('editor')}>
175-
<YfmEditorComponent editor={editor} autofocus className={b('editor')}>
178+
<FlexToolbar
179+
editor={editor}
180+
dotsTitle={'More action'}
181+
focus={() => editor.focus()}
182+
data={wToolbarConfig}
183+
hiddenActions={wHiddenData}
184+
/>
185+
<YfmEditorComponent editor={editor} autofocus className={b('editor-view')}>
176186
<ReactRendererComponent storage={renderStorage} />
177187
</YfmEditorComponent>
178188
<ProseMirrorDevTools view={editor.view} />

‎src/i18n/hints/en.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"math_hint": "Math uses",
3+
"math_hint_katex": "Katex syntax"
4+
}

‎src/i18n/hints/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {registerKeyset} from '../i18n';
2+
3+
import en from './en.json';
4+
import ru from './ru.json';
5+
6+
const KEYSET = 'hints';
7+
8+
export const i18n = registerKeyset(KEYSET, {en, ru});

‎src/i18n/hints/ru.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"math_hint": "При создании формул используется",
3+
"math_hint_katex": "синтаксис Katex"
4+
}

‎src/i18n/menubar/en.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"undo": "Undo",
3+
"redo": "Redo",
4+
"bold": "Bold",
5+
"italic": "Italic",
6+
"underline": "Underline",
7+
"strike": "Strikethrough",
8+
"mono": "Monospace",
9+
"mark": "Marked",
10+
"heading": "Heading",
11+
"heading1": "Heading 1",
12+
"heading2": "Heading 2",
13+
"heading3": "Heading 3",
14+
"heading4": "Heading 4",
15+
"heading5": "Heading 5",
16+
"heading6": "Heading 6",
17+
"list": "List",
18+
"ulist": "Bullet list",
19+
"olist": "Ordered list",
20+
"list__action_sink": "Sink item",
21+
"list__action_lift": "Lift item",
22+
"checkbox": "Checkbox",
23+
"quote": "Quote",
24+
"cut": "Cut",
25+
"note": "Note",
26+
"table": "Table",
27+
"code": "Code",
28+
"code_inline": "Inline code",
29+
"codeblock": "Code block",
30+
"hrule": "Separator",
31+
"math": "Math",
32+
"math_inline": "Inline math",
33+
"math_block": "Math block",
34+
"more_action": "More action",
35+
"tabs": "Tabs"
36+
}

‎src/i18n/menubar/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {registerKeyset} from '../i18n';
2+
3+
import en from './en.json';
4+
import ru from './ru.json';
5+
6+
const KEYSET = 'menubar';
7+
8+
export const i18n = registerKeyset(KEYSET, {en, ru});

‎src/i18n/menubar/ru.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"undo": "Отменить",
3+
"redo": "Повторить",
4+
"bold": "Жирный",
5+
"italic": "Курсив",
6+
"mono": "Моноширинный",
7+
"mark": "Выделенный",
8+
"underline": "Подчеркивание",
9+
"strike": "Зачеркивание",
10+
"heading": "Заголовок",
11+
"heading1": "Заголовок 1",
12+
"heading2": "Заголовок 2",
13+
"heading3": "Заголовок 3",
14+
"heading4": "Заголовок 4",
15+
"heading5": "Заголовок 5",
16+
"heading6": "Заголовок 6",
17+
"list": "Список",
18+
"ulist": "Маркированный список",
19+
"olist": "Нумерованный список",
20+
"list__action_sink": "Увеличить отступ",
21+
"list__action_lift": "Уменьшить отступ",
22+
"checkbox": "Контрольный список",
23+
"quote": "Цитата",
24+
"cut": "Кат",
25+
"note": "Примечание",
26+
"table": "Таблица",
27+
"code": "Код",
28+
"code_inline": "Код в тексте",
29+
"codeblock": "Блок кода",
30+
"hrule": "Разделитель",
31+
"math": "Формула",
32+
"math_inline": "Формула в тексте",
33+
"math_block": "Блок с формулой",
34+
"more_action": "Другие действия",
35+
"tabs": "Табы"
36+
}

‎src/icons/Mono.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import * as React from 'react';
2+
import {SVGProps} from 'react';
3+
const Mono = (props: SVGProps<SVGSVGElement>) => (
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
width={16}
7+
height={16}
8+
fill="none"
9+
viewBox="0 0 16 16"
10+
{...props}
11+
>
12+
<path
13+
fillRule="evenodd"
14+
clipRule="evenodd"
15+
d="M3.5 3.88862V13.25C3.5 13.6642 3.16421 14 2.75 14C2.33579 14 2 13.6642 2 13.25V3.32392C2 2.59274 2.59274 2 3.32392 2C3.75884 2 4.16601 2.21361 4.41321 2.57145L8 7.76376L11.5868 2.57145C11.834 2.21361 12.2412 2 12.6761 2C13.4073 2 14 2.59274 14 3.32392V13.25C14 13.6642 13.6642 14 13.25 14C12.8358 14 12.5 13.6642 12.5 13.25V3.88862L8.61708 9.50961C8.47705 9.71232 8.24638 9.83333 8 9.83333C7.75362 9.83333 7.52295 9.71232 7.38292 9.50961L3.5 3.88862Z"
16+
fill="currentColor"
17+
/>
18+
</svg>
19+
);
20+
export default Mono;

‎src/icons/Tabs.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import * as React from 'react';
2+
import {SVGProps} from 'react';
3+
const Tabs = (props: SVGProps<SVGSVGElement>) => (
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
width={16}
7+
height={16}
8+
fill="none"
9+
viewBox="0 0 16 16"
10+
{...props}
11+
>
12+
<path
13+
fillRule="evenodd"
14+
clipRule="evenodd"
15+
d="M5.25 3.5L4 3.5C3.17157 3.5 2.5 4.17157 2.5 5L2.5 11C2.5 11.8284 3.17157 12.5 4 12.5L12 12.5C12.8284 12.5 13.5 11.8284 13.5 11L13.5 7L10 7L6 7C5.80109 7 5.61032 6.92098 5.46967 6.78033C5.32902 6.63968 5.25 6.44891 5.25 6.25L5.25 3.5ZM6.75 3.5L9.25 3.5L9.25 5.5L6.75 5.5L6.75 3.5ZM10.75 3.5L12 3.5C12.8284 3.5 13.5 4.17157 13.5 5L13.5 5.5L10.75 5.5L10.75 3.5ZM15 5C15 3.34315 13.6569 2 12 2L4 2C2.34315 2 0.999999 3.34314 0.999999 5L0.999998 11C0.999998 12.6569 2.34314 14 4 14L12 14C13.6569 14 15 12.6569 15 11L15 5Z"
16+
fill="currentColor"
17+
/>
18+
</svg>
19+
);
20+
export default Tabs;

0 commit comments

Comments
 (0)