Merge pull request #16170 from lichess-org/persistent-markdown-editor…

…-mode remember markdown editor mode
lichess-org · Oct 5, 2024 · 17d0b13 · 17d0b13
2 parents 96c375a + fcf5cfa
commit 17d0b13
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/ui/bits/src/bits.cms.ts b/ui/bits/src/bits.cms.ts
@@ -1,8 +1,9 @@
 import * as xhr from 'common/xhr';
 import { throttle } from 'common/timing';
-import Editor from '@toast-ui/editor';
 import { currentTheme } from 'common/theme';
 import tablesort from 'tablesort';
+import { storedJsonProp } from 'common/storage';
+import { Editor, EditorType } from '@toast-ui/editor';
 
 site.load.then(() => {
   $('.markdown-editor').each(function (this: HTMLTextAreaElement) {
@@ -29,13 +30,14 @@ site.load.then(() => {
 const setupMarkdownEditor = (el: HTMLTextAreaElement) => {
   const postProcess = (markdown: string) => markdown.replace(/<br>/g, '').replace(/\n\s*#\s/g, '\n## ');
 
+  const initialEditType = storedJsonProp<EditorType>('markdown.initial-edit-type', () => 'wysiwyg');
   const editor: Editor = new Editor({
     el,
     usageStatistics: false,
     height: '60vh',
     theme: currentTheme(),
     initialValue: $('#form3-markdown').val() as string,
-    initialEditType: 'wysiwyg',
+    initialEditType: initialEditType(),
     language: $('html').attr('lang') as string,
     toolbarItems: [
       ['heading', 'bold', 'italic', 'strike'],
@@ -47,7 +49,10 @@ const setupMarkdownEditor = (el: HTMLTextAreaElement) => {
     ],
     autofocus: false,
     events: {
-      change: throttle(500, () => $('#form3-markdown').val(postProcess(editor.getMarkdown()))),
+      change: throttle(500, (mode: EditorType) => {
+        $('#form3-markdown').val(postProcess(editor.getMarkdown()));
+        initialEditType(mode);
+      }),
     },
     hooks: {
       addImageBlobHook: (blob, cb) => {

diff --git a/ui/bits/src/bits.ublogForm.ts b/ui/bits/src/bits.ublogForm.ts
@@ -1,9 +1,10 @@
 import * as xhr from 'common/xhr';
 import { throttle } from 'common/timing';
-import Editor from '@toast-ui/editor';
+import { Editor, EditorType } from '@toast-ui/editor';
 import Tagify from '@yaireo/tagify';
 import { currentTheme } from 'common/theme';
 import { wireCropDialog } from './exports/crop';
+import { storedJsonProp } from 'common/storage';
 
 site.load.then(() => {
   $('.markdown-editor').each(function (this: HTMLTextAreaElement) {
@@ -35,13 +36,14 @@ const setupTopics = (el: HTMLTextAreaElement) =>
 const setupMarkdownEditor = (el: HTMLTextAreaElement) => {
   const postProcess = (markdown: string) => markdown.replace(/<br>/g, '').replace(/\n\s*#\s/g, '\n## ');
 
+  const initialEditType = storedJsonProp<EditorType>('markdown.initial-edit-type', () => 'wysiwyg');
   const editor: Editor = new Editor({
     el,
     usageStatistics: false,
     height: '60vh',
     theme: currentTheme(),
     initialValue: $('#form3-markdown').val() as string,
-    initialEditType: 'wysiwyg',
+    initialEditType: initialEditType(),
     language: $('html').attr('lang') as string,
     toolbarItems: [
       ['heading', 'bold', 'italic', 'strike'],
@@ -53,7 +55,10 @@ const setupMarkdownEditor = (el: HTMLTextAreaElement) => {
     ],
     autofocus: false,
     events: {
-      change: throttle(500, () => $('#form3-markdown').val(postProcess(editor.getMarkdown()))),
+      change: throttle(500, (mode: EditorType) => {
+        $('#form3-markdown').val(postProcess(editor.getMarkdown()));
+        initialEditType(mode);
+      }),
     },
     hooks: {
       addImageBlobHook: (blob, cb) => {