chore: added toolbar to playground (#160)

demo/Playground.scss

@@ -38,6 +38,7 @@
     &__editor-view {
         min-height: 100px;
         margin: 20px 0;
+        padding-left: 4px;
     }
 
     &__pm-selection {

demo/Playground.tsx

@@ -16,7 +16,10 @@ import {
     Extension,
     ReactRenderStorage,
     ReactRendererComponent,
+    FlexToolbar,
 } from '../src';
+import {wHiddenData, wToolbarConfig} from '../src/toolbar/config/wysiwyg';
+
 import {PlaygroundHtmlPreview} from './HtmlPreview';
 import {ProseMirrorDevTools} from './ProseMirrorDevTools';
 import {PMSelection} from './PMSelection';
@@ -172,7 +175,14 @@ const Playground = React.memo<PlaygroundProps>((props) => {
             </div>
             <hr />
             <div className={b('editor')}>
-                <YfmEditorComponent editor={editor} autofocus className={b('editor')}>
+                <FlexToolbar
+                    editor={editor}
+                    dotsTitle={'More action'}
+                    focus={() => editor.focus()}
+                    data={wToolbarConfig}
+                    hiddenActions={wHiddenData}
+                />
+                <YfmEditorComponent editor={editor} autofocus className={b('editor-view')}>
                     <ReactRendererComponent storage={renderStorage} />
                 </YfmEditorComponent>
                 <ProseMirrorDevTools view={editor.view} />

src/i18n/hints/en.json

@@ -0,0 +1,4 @@
+{
+  "math_hint": "Math uses",
+  "math_hint_katex": "Katex syntax"
+}

src/i18n/hints/index.ts

@@ -0,0 +1,8 @@
+import {registerKeyset} from '../i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const KEYSET = 'hints';
+
+export const i18n = registerKeyset(KEYSET, {en, ru});

src/i18n/hints/ru.json

@@ -0,0 +1,4 @@
+{
+  "math_hint": "При создании формул используется",
+  "math_hint_katex": "синтаксис Katex"
+}

src/i18n/menubar/en.json

@@ -0,0 +1,36 @@
+{
+  "undo": "Undo",
+  "redo": "Redo",
+  "bold": "Bold",
+  "italic": "Italic",
+  "underline": "Underline",
+  "strike": "Strikethrough",
+  "mono": "Monospace",
+  "mark": "Marked",
+  "heading": "Heading",
+  "heading1": "Heading 1",
+  "heading2": "Heading 2",
+  "heading3": "Heading 3",
+  "heading4": "Heading 4",
+  "heading5": "Heading 5",
+  "heading6": "Heading 6",
+  "list": "List",
+  "ulist": "Bullet list",
+  "olist": "Ordered list",
+  "list__action_sink": "Sink item",
+  "list__action_lift": "Lift item",
+  "checkbox": "Checkbox",
+  "quote": "Quote",
+  "cut": "Cut",
+  "note": "Note",
+  "table": "Table",
+  "code": "Code",
+  "code_inline": "Inline code",
+  "codeblock": "Code block",
+  "hrule": "Separator",
+  "math": "Math",
+  "math_inline": "Inline math",
+  "math_block": "Math block",
+  "more_action": "More action",
+  "tabs": "Tabs"
+}

src/i18n/menubar/index.ts

@@ -0,0 +1,8 @@
+import {registerKeyset} from '../i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const KEYSET = 'menubar';
+
+export const i18n = registerKeyset(KEYSET, {en, ru});

src/i18n/menubar/ru.json

@@ -0,0 +1,36 @@
+{
+  "undo": "Отменить",
+  "redo": "Повторить",
+  "bold": "Жирный",
+  "italic": "Курсив",
+  "mono": "Моноширинный",
+  "mark": "Выделенный",
+  "underline": "Подчеркивание",
+  "strike": "Зачеркивание",
+  "heading": "Заголовок",
+  "heading1": "Заголовок 1",
+  "heading2": "Заголовок 2",
+  "heading3": "Заголовок 3",
+  "heading4": "Заголовок 4",
+  "heading5": "Заголовок 5",
+  "heading6": "Заголовок 6",
+  "list": "Список",
+  "ulist": "Маркированный список",
+  "olist": "Нумерованный список",
+  "list__action_sink": "Увеличить отступ",
+  "list__action_lift": "Уменьшить отступ",
+  "checkbox": "Контрольный список",
+  "quote": "Цитата",
+  "cut": "Кат",
+  "note": "Примечание",
+  "table": "Таблица",
+  "code": "Код",
+  "code_inline": "Код в тексте",
+  "codeblock": "Блок кода",
+  "hrule": "Разделитель",
+  "math": "Формула",
+  "math_inline": "Формула в тексте",
+  "math_block": "Блок с формулой",
+  "more_action": "Другие действия",
+  "tabs": "Табы"
+}

src/icons/Mono.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {SVGProps} from 'react';
+const Mono = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={16}
+        height={16}
+        fill="none"
+        viewBox="0 0 16 16"
+        {...props}
+    >
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            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"
+            fill="currentColor"
+        />
+    </svg>
+);
+export default Mono;

src/icons/Tabs.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {SVGProps} from 'react';
+const Tabs = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={16}
+        height={16}
+        fill="none"
+        viewBox="0 0 16 16"
+        {...props}
+    >
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            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"
+            fill="currentColor"
+        />
+    </svg>
+);
+export default Tabs;

src/icons/index.ts

@@ -0,0 +1,133 @@
+import TabsIcon from './Tabs';
+import MonoIcon from './Mono';
+import {
+    ArrowUturnCcwLeft as UndoIcon,
+    ArrowUturnCwRight as RedoIcon,
+    //
+    Bold as BoldIcon,
+    Italic as ItalicIcon,
+    Underline as UnderlineIcon,
+    Strikethrough as StrikethroughIcon,
+    FontCursor as MarkIcon,
+    //
+    Heading as HeadingIcon,
+    Heading1 as Heading1Icon,
+    Heading2 as Heading2Icon,
+    Heading3 as Heading3Icon,
+    Heading4 as Heading4Icon,
+    Heading5 as Heading5Icon,
+    Heading6 as Heading6Icon,
+    //
+    ListUl as ListBlIcon,
+    ListOl as ListOlIcon,
+    //
+    TextOutdent as LiftIcon,
+    TextIndent as SinkIcon,
+    //
+    Font as TextColorIcon,
+    //
+    Link as LinkIcon,
+    QuoteClose as QuoteIcon,
+    Scissors as CutIcon,
+    Sticker as NoteIcon,
+    Minus as HRuleIcon,
+    //
+    LayoutList as TableIcon,
+    //
+    ChevronsExpandHorizontal as IframeIcon,
+    SquareCheck as CheckListIcon,
+    Picture as ImageIcon,
+    //
+    Code as CodeInlineIcon,
+    FileCode as CodeBlockIcon,
+    //
+    Function as FunctionInlineIcon,
+    CurlyBracketsFunction as FunctionBlockIcon,
+} from '@gravity-ui/icons';
+import {ToolbarIconData} from '../toolbar';
+
+type Icon =
+    | 'undo'
+    | 'redo'
+    | 'bold'
+    | 'italic'
+    | 'underline'
+    | 'strikethrough'
+    | 'mono'
+    | 'mark'
+    | 'textColor'
+    | 'headline'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'bulletList'
+    | 'orderedList'
+    | 'sink'
+    | 'lift'
+    | 'cut'
+    | 'note'
+    | 'code'
+    | 'codeBlock'
+    | 'link'
+    | 'image'
+    | 'iframe'
+    | 'table'
+    | 'quote'
+    | 'checklist'
+    | 'horizontalRule'
+    | 'functionInline'
+    | 'functionBlock'
+    | 'tabs';
+
+type Icons = Record<Icon, ToolbarIconData>;
+
+export const icons: Icons = {
+    undo: {data: UndoIcon},
+    redo: {data: RedoIcon},
+
+    bold: {data: BoldIcon},
+    italic: {data: ItalicIcon},
+    underline: {data: UnderlineIcon},
+    strikethrough: {data: StrikethroughIcon},
+    mono: {data: MonoIcon},
+    mark: {data: MarkIcon},
+
+    textColor: {data: TextColorIcon},
+
+    headline: {data: HeadingIcon},
+    h1: {data: Heading1Icon},
+    h2: {data: Heading2Icon},
+    h3: {data: Heading3Icon},
+    h4: {data: Heading4Icon},
+    h5: {data: Heading5Icon},
+    h6: {data: Heading6Icon},
+
+    bulletList: {data: ListBlIcon},
+    orderedList: {data: ListOlIcon},
+
+    sink: {data: SinkIcon},
+    lift: {data: LiftIcon},
+
+    cut: {data: CutIcon},
+    note: {data: NoteIcon},
+
+    code: {data: CodeInlineIcon},
+    codeBlock: {data: CodeBlockIcon},
+
+    link: {data: LinkIcon},
+    image: {data: ImageIcon},
+    iframe: {data: IframeIcon},
+
+    table: {data: TableIcon},
+    quote: {data: QuoteIcon},
+    checklist: {data: CheckListIcon},
+    horizontalRule: {data: HRuleIcon},
+
+    functionInline: {data: FunctionInlineIcon},
+    functionBlock: {data: FunctionBlockIcon},
+
+    tabs: {data: TabsIcon},
+};

src/shortcuts/chars.ts

@@ -0,0 +1,16 @@
+import {isMac} from '../utils/platform';
+import {ModKey as MK, Key as K} from './const';
+import {Chars} from './types';
+
+const cmMac = {
+    [MK.Mod]: 'cmd',
+};
+
+const cmPC = {
+    [MK.Mod]: 'ctrl',
+};
+
+export const cmChars: Chars = {
+    [K.Esc]: 'Esc',
+    ...(isMac() ? cmMac : cmPC),
+};

src/shortcuts/const.ts

@@ -0,0 +1,52 @@
+export enum ModKey {
+    Mod = 'mod',
+    Alt = 'alt',
+    Option = 'alt',
+    Cmd = 'cmd',
+    Ctrl = 'ctrl',
+    Control = 'ctrl',
+    Shift = 'shift',
+    Tab = 'tab',
+}
+
+export enum Key {
+    Enter = 'Enter',
+    Esc = 'Escape',
+}
+
+export enum Action {
+    __debug = '__debug__',
+
+    Cancel = 'cancel',
+    Submit = 'submit',
+
+    Undo = 'undo',
+    Redo = 'redo',
+
+    Bold = 'bold',
+    Italic = 'italic',
+    Underline = 'underline',
+    Strike = 'strike',
+    Code = 'code',
+    Link = 'link',
+
+    Text = 'text',
+    Heading1 = 'h1',
+    Heading2 = 'h2',
+    Heading3 = 'h3',
+    Heading4 = 'h4',
+    Heading5 = 'h5',
+    Heading6 = 'h6',
+
+    BulletList = 'ulist',
+    OrderedList = 'olist',
+
+    LiftListItem = 'list__action_lift',
+    SinkListItem = 'list__action_sink',
+
+    Quote = 'quote',
+    CodeBlock = 'codeblock',
+
+    Cut = 'cut',
+    Note = 'note',
+}