!184 修复左移文本样式混乱

Merge pull request !184 from wangzhiyusss/master
2024-11-23 15:39:50 +00:00 · 2023-03-03 06:50:37 +00:00 · 2023-03-03 06:50:37 +00:00 · c487b23222
commit c487b23222
parent a4af57e7ac 355768c372
4 changed files with 348 additions and 334 deletions
--- a/common/resources/src/main/resources/rawfile/editor.html
+++ b/common/resources/src/main/resources/rawfile/editor.html
@ -15,8 +15,9 @@
 <body onload="load()">
 <div class="edit-box">

-
-  <div id="editorjs" contenteditable="true"></div>
+  <div id="editorjs_box" contenteditable="true">
+    <div id="editorjs" contenteditable="true"></div>
+  </div>
  <div class="button-box" id="buttonBox">
    <div id="addToDo">
      <img id="img1" src="icon/todo1.png">
--- a/common/resources/src/main/resources/rawfile/editor_style.css
+++ b/common/resources/src/main/resources/rawfile/editor_style.css
@ -27,10 +27,18 @@ body {
 }

 #editorjs {
-  padding-left: 1px;
-  padding-right: 24px;
+  outline: 0px solid transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  color: #182431;
+  opacity: 0.9;
+  user-select: none;
+}
+
+#editorjs_box {
  width: 100%;
-  height: 100%;
+  height: 90%;
  outline: 0px solid transparent;
  background-repeat: no-repeat;
  background-position: center;
--- a/common/resources/src/main/resources/rawfile/rich_editor.js
+++ b/common/resources/src/main/resources/rawfile/rich_editor.js
@ -18,488 +18,492 @@ var RICH_EDITOR = {};
 RICH_EDITOR.editor = document.getElementById('editorjs');

 RICH_EDITOR.setHtml = function (contents) {
-    var base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
-    if (base64regex.test(contents)) {
-        RICH_EDITOR.editor.innerHTML = decodeURIComponent(escape(atob(contents)));
-    } else {
-        RICH_EDITOR.editor.innerHTML = contents;
-    }
+  var base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
+  if (base64regex.test(contents)) {
+    RICH_EDITOR.editor.innerHTML = decodeURIComponent(escape(atob(contents)));
+  } else {
+    RICH_EDITOR.editor.innerHTML = contents;
+  }
 };

 RICH_EDITOR.getHtml = function () {
-    return RICH_EDITOR.editor.innerHTML;
+  return RICH_EDITOR.editor.innerHTML;
 };

 RICH_EDITOR.undo = function () {
-    document.execCommand('undo', false, null);
+  document.execCommand('undo', false, null);
 };

 RICH_EDITOR.redo = function () {
-    document.execCommand('redo', false, null);
+  document.execCommand('redo', false, null);
 };

 RICH_EDITOR.setBold = function () {
-    document.execCommand('bold');
+  document.execCommand('bold');
 };

 RICH_EDITOR.setItalic = function () {
-    document.execCommand('italic', false, null);
+  document.execCommand('italic', false, null);
 };

 RICH_EDITOR.setSubscript = function () {
-    document.execCommand('subscript', false, null);
+  document.execCommand('subscript', false, null);
 };

 RICH_EDITOR.setSuperscript = function () {
-    document.execCommand('superscript', false, null);
+  document.execCommand('superscript', false, null);
 };

 RICH_EDITOR.setStrikeThrough = function () {
-    document.execCommand('strikeThrough', false, null);
+  document.execCommand('strikeThrough', false, null);
 };

 RICH_EDITOR.setUnderline = function () {
-    document.execCommand('underline', false, null);
+  document.execCommand('underline', false, null);
 };

 RICH_EDITOR.getListStyle = function () {
-    var selection;
-    var type;
-    if (window.getSelection) {
-        selection = getSelection();
-    }
-    if (!selection) {
-        return
-    }
-    var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
-    try {
-        var child = range.commonAncestorContainer;
-        for (var i = 0; i < 10; i++) {
-            if (child.nodeName === 'OL') {
-                console.info('insertOrderedList');
-                document.execCommand('insertOrderedList', false, null);
-                return child.style['list-style'];
-            }
-            if (child.nodeName === 'UL') {
-                console.info('insertUnorderedList');
-                document.execCommand('insertUnorderedList', false, null);
-                return child.style['list-style'];
-            }
-            if (child.parentNode) {
-                child = child.parentNode;
-            }
-        }
-    } catch (err) {
-        console.error(err);
+  var selection;
+  var type;
+  if (window.getSelection) {
+    selection = getSelection();
+  }
+  if (!selection) {
+    return
+  }
+  var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
+  try {
+    var child = range.commonAncestorContainer;
+    for (var i = 0; i < 10; i++) {
+      if (child.nodeName === 'OL') {
+        console.info('insertOrderedList');
+        document.execCommand('insertOrderedList', false, null);
+        return child.style['list-style'];
+      }
+      if (child.nodeName === 'UL') {
+        console.info('insertUnorderedList');
+        document.execCommand('insertUnorderedList', false, null);
+        return child.style['list-style'];
+      }
+      if (child.parentNode) {
+        child = child.parentNode;
+      }
    }
+  } catch (err) {
+    console.error(err);
+  }

 };

 RICH_EDITOR.setNumbers = function () {
-    let listStyle = RICH_EDITOR.getListStyle();
-    if (listStyle === 'decimal') {
-        return;
-    }
-    document.execCommand('insertOrderedList', false, null);
-    var selection;
-    var type;
-    if (window.getSelection) {
-        selection = getSelection();
-    }
-    if (!selection) {
-        return
-    }
-    var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
-    try {
-        var child = range.commonAncestorContainer;
-        for (var i = 0; i < 10; i++) {
-            if (child.nodeName === 'OL') {
-                child.style['list-style'] = 'decimal';
-                break;
-            }
-            if (child.parentNode) {
-                child = child.parentNode;
-            }
-        }
-    } catch (err) {
-        console.error(err);
+  let listStyle = RICH_EDITOR.getListStyle();
+  if (listStyle === 'decimal') {
+    return;
+  }
+  document.execCommand('insertOrderedList', false, null);
+  var selection;
+  var type;
+  if (window.getSelection) {
+    selection = getSelection();
+  }
+  if (!selection) {
+    return
+  }
+  var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
+  try {
+    var child = range.commonAncestorContainer;
+    for (var i = 0; i < 10; i++) {
+      if (child.nodeName === 'OL') {
+        child.style['list-style'] = 'decimal';
+        break;
+      }
+      if (child.parentNode) {
+        child = child.parentNode;
+      }
    }
+  } catch (err) {
+    console.error(err);
+  }
 };

 RICH_EDITOR.setABC = function () {
-    let listStyle = RICH_EDITOR.getListStyle();
-    if (listStyle === 'lower-alpha') {
-        return;
-    }
-    document.execCommand('insertOrderedList', false, null);
-    var selection;
-    var type;
-    if (window.getSelection) {
-        selection = getSelection();
-    }
-    if (!selection) {
-        return
-    }
-    var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
-    try {
-        var child = range.commonAncestorContainer;
-        for (var i = 0; i < 10; i++) {
-            if (child.nodeName === 'OL') {
-                child.style['list-style'] = 'lower-alpha';
-                break;
-            }
-            if (child.parentNode) {
-                child = child.parentNode;
-            }
-        }
-    } catch (err) {
-        console.error(err);
+  let listStyle = RICH_EDITOR.getListStyle();
+  if (listStyle === 'lower-alpha') {
+    return;
+  }
+  document.execCommand('insertOrderedList', false, null);
+  var selection;
+  var type;
+  if (window.getSelection) {
+    selection = getSelection();
+  }
+  if (!selection) {
+    return
+  }
+  var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
+  try {
+    var child = range.commonAncestorContainer;
+    for (var i = 0; i < 10; i++) {
+      if (child.nodeName === 'OL') {
+        child.style['list-style'] = 'lower-alpha';
+        break;
+      }
+      if (child.parentNode) {
+        child = child.parentNode;
+      }
    }
+  } catch (err) {
+    console.error(err);
+  }
 };

 RICH_EDITOR.setBullets = function () {
-    let listStyle = RICH_EDITOR.getListStyle();
-    if (listStyle === 'disc') {
-        return;
-    }
-    document.execCommand('insertUnorderedList', false, null);
-    var selection;
-    var type;
-    if (window.getSelection) {
-        selection = getSelection();
-    }
-    if (!selection) {
-        return
-    }
-    var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
-    try {
-        var child = range.commonAncestorContainer;
-        for (var i = 0; i < 10; i++) {
-            if (child.nodeName === 'UL') {
-                child.style['list-style'] = 'disc';
-                break;
-            }
-            if (child.parentNode) {
-                child = child.parentNode;
-            }
-        }
-    } catch (err) {
-        console.error(err);
+  let listStyle = RICH_EDITOR.getListStyle();
+  if (listStyle === 'disc') {
+    return;
+  }
+  document.execCommand('insertUnorderedList', false, null);
+  var selection;
+  var type;
+  if (window.getSelection) {
+    selection = getSelection();
+  }
+  if (!selection) {
+    return
+  }
+  var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
+  try {
+    var child = range.commonAncestorContainer;
+    for (var i = 0; i < 10; i++) {
+      if (child.nodeName === 'UL') {
+        child.style['list-style'] = 'disc';
+        break;
+      }
+      if (child.parentNode) {
+        child = child.parentNode;
+      }
    }
+  } catch (err) {
+    console.error(err);
+  }
 };

 RICH_EDITOR.setSquare = function () {
-    let listStyle = RICH_EDITOR.getListStyle();
-    if (listStyle === 'square') {
-        return;
-    }
-    document.execCommand('insertUnorderedList', false, null);
-    var selection;
-    var type;
-    if (window.getSelection) {
-        selection = getSelection();
-    }
-    if (!selection) {
-        return
-    }
-    var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
-    try {
-        var child = range.commonAncestorContainer;
-        for (var i = 0; i < 10; i++) {
-            if (child.nodeName === 'UL') {
-                child.style['list-style'] = 'square';
-                break;
-            }
-            if (child.parentNode) {
-                child = child.parentNode;
-            }
-        }
-    } catch (err) {
-        console.error(err);
+  let listStyle = RICH_EDITOR.getListStyle();
+  if (listStyle === 'square') {
+    return;
+  }
+  document.execCommand('insertUnorderedList', false, null);
+  var selection;
+  var type;
+  if (window.getSelection) {
+    selection = getSelection();
+  }
+  if (!selection) {
+    return
+  }
+  var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
+  try {
+    var child = range.commonAncestorContainer;
+    for (var i = 0; i < 10; i++) {
+      if (child.nodeName === 'UL') {
+        child.style['list-style'] = 'square';
+        break;
+      }
+      if (child.parentNode) {
+        child = child.parentNode;
+      }
    }
+  } catch (err) {
+    console.error(err);
+  }
 };

 RICH_EDITOR.setTextColor = function (color) {
-    document.execCommand('foreColor', false, color);
+  document.execCommand('foreColor', false, color);
 };

 RICH_EDITOR.setFontSize = function (fontSize) {
-    document.execCommand('fontSize', false, fontSize);
+  document.execCommand('fontSize', false, fontSize);
 };

 RICH_EDITOR.execFontSize = function (size, unit) {
-    if (size === '12') {
-        document.execCommand('fontSize', false, 3);
-    } else if (size === '16') {
-        document.execCommand('fontSize', false, 4);
-    } else if (size === '20') {
-        document.execCommand('fontSize', false, 5);
-    } else if (size === '24') {
-        document.execCommand('fontSize', false, 6);
-    } else if (size === '28') {
-        document.execCommand('fontSize', false, 7);
-    }
+  if (size === '12') {
+    document.execCommand('fontSize', false, 3);
+  } else if (size === '16') {
+    document.execCommand('fontSize', false, 4);
+  } else if (size === '20') {
+    document.execCommand('fontSize', false, 5);
+  } else if (size === '24') {
+    document.execCommand('fontSize', false, 6);
+  } else if (size === '28') {
+    document.execCommand('fontSize', false, 7);
+  }
 };

 var pad = 24;
 RICH_EDITOR.setIndent = function () {
-    var parents = document.getElementById('editorjs');
-    parents.removeAttribute('padding-left');
-    pad = pad + 24;
-    parents.style.paddingLeft = pad + 'px';
+  var parents = document.getElementById('editorjs');
+  parents.removeAttribute('padding-left');
+  if (pad >= 408) {
+    return
+  }
+  pad = pad + 24;
+  parents.style.paddingLeft = pad + 'px';
 };

 RICH_EDITOR.setOutdent = function () {
-    var parents = document.getElementById('editorjs');
-    parents.removeAttribute('padding-left');
-    if (pad === 24) {
-        parents.style.paddingLeft = 24 + 'px';
-    } else {
-        pad = pad - 24;
-        parents.style.paddingLeft = pad + 'px';
-    }
+  var parents = document.getElementById('editorjs');
+  parents.removeAttribute('padding-left');
+  if (pad === 24) {
+    parents.style.paddingLeft = 24 + 'px';
+  } else {
+    pad = pad - 24;
+    parents.style.paddingLeft = pad + 'px';
+  }
 };

 RICH_EDITOR.setJustifyLeft = function () {
-    document.execCommand('justifyLeft', false, null);
+  document.execCommand('justifyLeft', false, null);
 };

 RICH_EDITOR.setJustifyCenter = function () {
-    document.execCommand('justifyCenter', false, null);
+  document.execCommand('justifyCenter', false, null);
 };

 RICH_EDITOR.setJustifyRight = function () {
-    document.execCommand('justifyRight', false, null);
+  document.execCommand('justifyRight', false, null);
 };

 RICH_EDITOR.insertImage = function (url) {
-    var html = '<br></br><img src="' + url
-    + '" alt="picvision" style="margin:0px auto;width:90%;display:table-cell;'
-    + 'vertical-align:middle;border-radius:10px;max-width:90%" /><br></br>';
-    RICH_EDITOR.insertHTML(html);
-    RICH_EDITOR.editor.scrollIntoView(false);
+  var html = '<br></br><img src="' + url
+  + '" alt="picvision" style="margin:0px auto;width:90%;display:table-cell;'
+  + 'vertical-align:middle;border-radius:10px;max-width:90%" /><br></br>';
+  RICH_EDITOR.insertHTML(html);
+  RICH_EDITOR.editor.scrollIntoView(false);
 };

 RICH_EDITOR.insertHTML = function (html) {
-    document.execCommand('insertHTML', false, html);
+  document.execCommand('insertHTML', false, html);
 };

 RICH_EDITOR.setDone = function () {
-    var html = '<input type="checkbox" checked="checked"/> &nbsp;';
-    document.execCommand('insertHTML', false, html);
+  var html = '<input type="checkbox" checked="checked"/> &nbsp;';
+  document.execCommand('insertHTML', false, html);
 };

 RICH_EDITOR.addTodo = function (e) {
-    var KEY_ENTER;
-    KEY_ENTER = 13;
-    if (e.which === KEY_ENTER) {
-        var node = RICH_EDITOR.getSelectedAnchorNode();
-        if (node && node.nodeName === '#text') {
-            node = node.parentElement;
-        }
-        if (node && node.nodeName === 'SPAN' && node.previousElementSibling
-        && node.previousElementSibling.className === 'note-checkbox') {
-            RICH_EDITOR.setTodo();
-            e.preventDefault();
-        }
+  var KEY_ENTER;
+  KEY_ENTER = 13;
+  if (e.which === KEY_ENTER) {
+    var node = RICH_EDITOR.getSelectedAnchorNode();
+    if (node && node.nodeName === '#text') {
+      node = node.parentElement;
    }
+    if (node && node.nodeName === 'SPAN' && node.previousElementSibling
+    && node.previousElementSibling.className === 'note-checkbox') {
+      RICH_EDITOR.setTodo();
+      e.preventDefault();
+    }
+  }
 };

 RICH_EDITOR.setTodo = function () {
-    var parent = document.getElementById('editorjs');
-    var isContentEmpty = parent.innerHTML.trim().length === 0 || parent.innerHTML === '<br>';
-    var html = (isContentEmpty ? '' : '<br/>')
-    + '<input name="checkbox" type="checkbox" onclick="onCheckChange(this)" class="note-checkbox">'
-    + '<span class="note-checkbox-txt">&nbsp;</span>';
-    document.execCommand('insertHTML', false, html);
+  var parent = document.getElementById('editorjs');
+  var isContentEmpty = parent.innerHTML.trim().length === 0 || parent.innerHTML === '<br>';
+  var html = (isContentEmpty ? '' : '<br/>')
+  + '<input name="checkbox" type="checkbox" onclick="onCheckChange(this)" class="note-checkbox">'
+  + '<span class="note-checkbox-txt">&nbsp;</span>';
+  document.execCommand('insertHTML', false, html);
 };

 function onCheckChange(checkbox) {
-    if (checkbox.checked === true) {
-        checkbox.setAttribute('checked', 'checked');
-    } else {
-        checkbox.removeAttribute('checked');
-    }
+  if (checkbox.checked === true) {
+    checkbox.setAttribute('checked', 'checked');
+  } else {
+    checkbox.removeAttribute('checked');
+  }
 }

 RICH_EDITOR.restorerange = function () {
-    var selection = window.getSelection();
-    selection.removeAllRanges();
-    var range = document.createRange();
-    range.setStart(RICH_EDITOR.currentSelection.startContainer, RICH_EDITOR.currentSelection.startOffset);
-    range.setEnd(RICH_EDITOR.currentSelection.endContainer, RICH_EDITOR.currentSelection.endOffset);
-    selection.addRange(range);
+  var selection = window.getSelection();
+  selection.removeAllRanges();
+  var range = document.createRange();
+  range.setStart(RICH_EDITOR.currentSelection.startContainer, RICH_EDITOR.currentSelection.startOffset);
+  range.setEnd(RICH_EDITOR.currentSelection.endContainer, RICH_EDITOR.currentSelection.endOffset);
+  selection.addRange(range);
 };

 // 获取光标开始位置归属节点

 RICH_EDITOR.getSelectedAnchorNode = function () {
-    var node;
-    var selection;
-    if (window.getSelection) {
-        selection = getSelection();
-        node = selection.anchorNode;
-    }
-    if (!node && document.selection) {
-        selection = document.selection;
-        var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
-        node = range.commonAncestorContainer ? range.commonAncestorContainer : range.parentElement
-        ? range.parentElement() : range.item(0);
-    }
-    return node;
+  var node;
+  var selection;
+  if (window.getSelection) {
+    selection = getSelection();
+    node = selection.anchorNode;
+  }
+  if (!node && document.selection) {
+    selection = document.selection;
+    var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
+    node = range.commonAncestorContainer ? range.commonAncestorContainer : range.parentElement
+                                                                             ? range.parentElement() : range.item(0);
+  }
+  return node;
 };

 RICH_EDITOR.cancelSelection = function () {
-    var selection = window.getSelection();
-    selection.removeAllRanges();
+  var selection = window.getSelection();
+  selection.removeAllRanges();
 }

 var callBackToApp;
+
 function getHtmlContent() {
-    console.log('getHtmlContent');
-    var htmlString =  RICH_EDITOR.getHtml();
-    let imgName = getImagePathFromContent(htmlString);
-    htmlString = window.btoa(unescape(encodeURIComponent(htmlString)));
-    callBackToApp.callbackImagePath(imgName);
-    var str = callBackToApp.callbackhtml(htmlString);
-    console.log('getHtmlContent end');
+  console.log('getHtmlContent');
+  var htmlString = RICH_EDITOR.getHtml();
+  let imgName = getImagePathFromContent(htmlString);
+  htmlString = window.btoa(unescape(encodeURIComponent(htmlString)));
+  callBackToApp.callbackImagePath(imgName);
+  var str = callBackToApp.callbackhtml(htmlString);
+  console.log('getHtmlContent end');
 }

 function saveHtmlContent() {
-    console.log('saveHtmlContent');
-    var htmlString =  RICH_EDITOR.getHtml();
-    let imgName = getImagePathFromContent(htmlString);
-    htmlString = window.btoa(unescape(encodeURIComponent(htmlString)));
+  console.log('saveHtmlContent');
+  var htmlString = RICH_EDITOR.getHtml();
+  let imgName = getImagePathFromContent(htmlString);
+  htmlString = window.btoa(unescape(encodeURIComponent(htmlString)));

-    callBackToApp.callbackImagePath(imgName);
-    var str = callBackToApp.callbackhtmlSave(htmlString);
-    console.log('saveHtmlContent end');
+  callBackToApp.callbackImagePath(imgName);
+  var str = callBackToApp.callbackhtmlSave(htmlString);
+  console.log('saveHtmlContent end');
 }

 function getImagePathFromContent(contentInfo) {
-    let imgReg = /<img[^>]+>/g;
-    let imgName = "";
-    let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
-    let imgArray = contentInfo.match(imgReg);
-    // 取第一张图片做为标题栏后的缩略图
-    if (imgArray && imgArray.length > 0) {
-        let src = imgArray[0].match(srcReg);
-        if (src != null && src.length > 1) {
-            imgName = src[1];
-            if (imgName.indexOf('shuxue.png') >= 0 || imgName.indexOf('cake.png') >= 0) {
-                imgName = "/res/" + imgName;
-            }
-        }
+  let imgReg = /<img[^>]+>/g;
+  let imgName = "";
+  let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
+  let imgArray = contentInfo.match(imgReg);
+  // 取第一张图片做为标题栏后的缩略图
+  if (imgArray && imgArray.length > 0) {
+    let src = imgArray[0].match(srcReg);
+    if (src != null && src.length > 1) {
+      imgName = src[1];
+      if (imgName.indexOf('shuxue.png') >= 0 || imgName.indexOf('cake.png') >= 0) {
+        imgName = "/res/" + imgName;
+      }
    }
-    return imgName;
+  }
+  return imgName;
 }

 function scheduledSaveContent() {
-    console.info('scheduledSaveContent');
-    var htmlString = RICH_EDITOR.getHtml();
-    let imgName = getImagePathFromContent(htmlString);
-    htmlString = window.btoa(unescape(encodeURIComponent(htmlString)));
-    callBackToApp.callbackImagePath(imgName);
-    var str = callBackToApp.callbackScheduledSave(htmlString);
-    console.info('scheduledSaveContent end');
+  console.info('scheduledSaveContent');
+  var htmlString = RICH_EDITOR.getHtml();
+  let imgName = getImagePathFromContent(htmlString);
+  htmlString = window.btoa(unescape(encodeURIComponent(htmlString)));
+  callBackToApp.callbackImagePath(imgName);
+  var str = callBackToApp.callbackScheduledSave(htmlString);
+  console.info('scheduledSaveContent end');
 }

 document.body.addEventListener('paste', (event) => {
-    let length = event.clipboardData.items.length;
-    if (length > 0) {
-        let file = event.clipboardData.items[0].getAsFile();
-        const reader = new FileReader();
-        reader.onloadend = () => {
-            callBackToApp.callbackPasteImage(reader.result);
-        }
-        reader.readAsDataURL(file);
-        event.preventDefault();
+  let length = event.clipboardData.items.length;
+  if (length > 0) {
+    let file = event.clipboardData.items[0].getAsFile();
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      callBackToApp.callbackPasteImage(reader.result);
    }
+    reader.readAsDataURL(file);
+    event.preventDefault();
+  }
 });

 RICH_EDITOR.getFontSizes = function () {
-    document.execCommand('fontSize', false, null);
-    var fontElements = window.getSelection().anchorNode.parentNode;
-    var getSize = parseInt(window.getComputedStyle(fontElements, null).fontSize)
-    var str = callBackToApp.callbackGetSize(getSize);
+  document.execCommand('fontSize', false, null);
+  var fontElements = window.getSelection().anchorNode.parentNode;
+  var getSize = parseInt(window.getComputedStyle(fontElements, null).fontSize)
+  var str = callBackToApp.callbackGetSize(getSize);
 };

 RICH_EDITOR.insertImageHtml = function (contents) {
-    let selection = window.getSelection();
-    if (!selection.rangeCount)
-    return false;
-    selection.deleteFromDocument();
-    let img = document.createElement('img');
-    img.src = contents;
-    selection.getRangeAt(0).insertNode(img);
+  let selection = window.getSelection();
+  if (!selection.rangeCount)
+  return false;
+  selection.deleteFromDocument();
+  let img = document.createElement('img');
+  img.src = contents;
+  selection.getRangeAt(0).insertNode(img);
 };

 document.addEventListener('click', (e) => {
-    console.info(`lsq: e is ${JSON.stringify(e)}`)
-    var parent = document.getElementById('editorjs');
-    if (parent.id !== 'editorjs') {
-        e.preventDefault()
-    }
+  console.info(`lsq: e is ${JSON.stringify(e)}`)
+  var parent = document.getElementById('editorjs');
+  if (parent.id !== 'editorjs') {
+    e.preventDefault()
+  }
 })

 document.getElementById('addToDo').addEventListener('click', () => {
-    callBackToApp.addToDo()
+  callBackToApp.addToDo()
 })

 document.getElementById('chooseStyle').addEventListener('click', () => {
-    callBackToApp.chooseStyle()
+  callBackToApp.chooseStyle()
 })

 document.getElementById('openAlbum').addEventListener('click', () => {
-    callBackToApp.openAlbum()
+  callBackToApp.openAlbum()
 })

 function changeSizeToRk() {
-    document.getElementById('img1').style.width = '40px';
-    document.getElementById('img1').style.height = '40px';
-    document.getElementById('img2').style.width = '40px';
-    document.getElementById('img2').style.height = '40px';
-    document.getElementById('img3').style.width = '40px';
-    document.getElementById('img3').style.height = '40px';
-    document.getElementById('lable1').style.fontSize = '20px';
-    document.getElementById('lable2').style.fontSize = '20px';
-    document.getElementById('lable3').style.fontSize = '20px';
+  document.getElementById('img1').style.width = '40px';
+  document.getElementById('img1').style.height = '40px';
+  document.getElementById('img2').style.width = '40px';
+  document.getElementById('img2').style.height = '40px';
+  document.getElementById('img3').style.width = '40px';
+  document.getElementById('img3').style.height = '40px';
+  document.getElementById('lable1').style.fontSize = '20px';
+  document.getElementById('lable2').style.fontSize = '20px';
+  document.getElementById('lable3').style.fontSize = '20px';
 }

 function changeSizeToPhone() {
-    document.getElementById('img1').style.width = '24px';
-    document.getElementById('img1').style.height = '24px';
-    document.getElementById('img2').style.width = '24px';
-    document.getElementById('img2').style.height = '24px';
-    document.getElementById('img3').style.width = '24px';
-    document.getElementById('img3').style.height = '24px';
-    document.getElementById('lable1').style.fontSize = '12px';
-    document.getElementById('lable2').style.fontSize = '12px';
-    document.getElementById('lable3').style.fontSize = '12px';
+  document.getElementById('img1').style.width = '24px';
+  document.getElementById('img1').style.height = '24px';
+  document.getElementById('img2').style.width = '24px';
+  document.getElementById('img2').style.height = '24px';
+  document.getElementById('img3').style.width = '24px';
+  document.getElementById('img3').style.height = '24px';
+  document.getElementById('lable1').style.fontSize = '12px';
+  document.getElementById('lable2').style.fontSize = '12px';
+  document.getElementById('lable3').style.fontSize = '12px';
 }

 function changeSizeToTablet() {
-    document.getElementById('img1').style.width = '28px';
-    document.getElementById('img1').style.height = '28px';
-    document.getElementById('img2').style.width = '28px';
-    document.getElementById('img2').style.height = '28px';
-    document.getElementById('img3').style.width = '28px';
-    document.getElementById('img3').style.height = '28px';
-    document.getElementById('lable1').style.fontSize = '12px';
-    document.getElementById('lable2').style.fontSize = '12px';
-    document.getElementById('lable3').style.fontSize = '12px';
+  document.getElementById('img1').style.width = '28px';
+  document.getElementById('img1').style.height = '28px';
+  document.getElementById('img2').style.width = '28px';
+  document.getElementById('img2').style.height = '28px';
+  document.getElementById('img3').style.width = '28px';
+  document.getElementById('img3').style.height = '28px';
+  document.getElementById('lable1').style.fontSize = '12px';
+  document.getElementById('lable2').style.fontSize = '12px';
+  document.getElementById('lable3').style.fontSize = '12px';
 }

 function hiddenButton() {
-    document.getElementById('buttonBox').style.display = 'none';
+  document.getElementById('buttonBox').style.display = 'none';
 }

 RICH_EDITOR.getFocus = function () {
-    return document.getElementById('editorjs').focus();
+  return document.getElementById('editorjs').focus();
 }

 document.getElementById('editorjs').addEventListener('click', () => {
-    if (callBackToApp.getBreakPoint() === 'sm') {
-        document.getElementById('buttonBox').style.display = 'flex';
-    }
+  if (callBackToApp.getBreakPoint() === 'sm') {
+    document.getElementById('buttonBox').style.display = 'flex';
+  }
 })
--- a/common/utils/src/main/ets/default/baseUtil/FolderUtil.ets
+++ b/common/utils/src/main/ets/default/baseUtil/FolderUtil.ets
@ -121,10 +121,11 @@ export class FolderUtil {
  */
  getFolderText(folderData: FolderData): string | Resource {
    if (folderData.uuid && folderData) {
-      return 
+      LogUtil.info(TAG, "folderData.uuid " + folderData.uuid + " folderData.folder_type " + folderData.folder_type)
+      return folderData.folder_type == FolderType.CusDef ? folderData.name : folderTextMap[folderData.uuid]
+    } else {
+      LogUtil.info(TAG, "folderData undefined")
    }
-    LogUtil.info(TAG, "folderData.uuid " + folderData.uuid + " folderData.folder_type " + folderData.folder_type)
-    return folderData.folder_type == FolderType.CusDef ? folderData.name : folderTextMap[folderData.uuid]
  }

  /**