add wrap button

public/esltool.js

@@ -149,7 +149,7 @@ for (const button of [askButton, correctBtn, translateBtn, explainBtn, defineBtn
 
 setTimeout(() => {
     utils.displayMarkdown(`
-hello, this is note for language learner
+hello, this is note app for language learner, press the blue circle then speak now! try ask button or ctrl + enter to send current line or selected text to AI
 code will display like this:
 \`\`\`
 this code \`\${value}\`

public/notebin.js

@@ -43,22 +43,23 @@ function getCurrentLineString(element) {
 
 
 
-function createLastButton(cmd, name = cmd) {
+function createLastButton(cmd, name = cmd, onclick = console.log,style={}) {
   const button = document.createElement('button');
 
   button.className = 'toastui-editor-toolbar-icons last';
   button.style.backgroundImage = 'none';
-  button.style.margin = '0';
-  button.style.fontSize='x-large';
-  button.innerHTML = `<b>${name}</b>`;
+  button.style.margin = style.margin || '0';
+  button.style.fontSize = style.fontSize || 'x-large';
+  button.innerHTML = `${name}`;
   button.addEventListener('click', () => {
-    editor.exec(cmd);
+    onclick();
+    editor.exec(cmd || '');
   });
 
   return button;
 }
 
-let editorContainer=document.querySelector('#notebin_editor');
+let editorContainer = document.querySelector('#notebin_editor');
 window.tuieditor = window.editor = new toastui.Editor({
   el: document.querySelector('#notebin_editor'),
   previewStyle: 'tab',
@@ -75,6 +76,26 @@ window.tuieditor = window.editor = new toastui.Editor({
       el: createLastButton('redo', '⤻'),
       command: 'redo',
       tooltip: 'Redo'
+    },
+    {
+      el: createLastButton('', 'wrap', () => {
+        const element = document.querySelector('.ProseMirror');
+        if (element.style.overflowX === 'auto' && element.style.whiteSpace === 'nowrap') {
+          element.style.overflowX = '';
+          element.style.whiteSpace = '';
+        } else {
+          element.style.overflowX = 'auto';
+          element.style.whiteSpace = 'nowrap';
+        }
+
+      },
+      {
+        fontSize: 'medium'
+      }
+    ),
+      
+      command: 'wrap',
+      tooltip: 'wrap'
     }
     ],
     ['heading'],
@@ -89,43 +110,43 @@ window.tuieditor = window.editor = new toastui.Editor({
 });
 
 setTimeout(() => {
-  
-// tuieditor.focus();
-tuieditor.moveCursorToStart(true);
 
-window.tuieditor.mdEditor.el.addEventListener('focus', (event) => {
-  // Log the event and the pasted data
-  console.log('focus event triggered:', event);
-  syncNote();
-});
+  // tuieditor.focus();
+  tuieditor.moveCursorToStart(true);
 
+  window.tuieditor.mdEditor.el.addEventListener('focus', (event) => {
+    // Log the event and the pasted data
+    console.log('focus event triggered:', event);
+    syncNote();
+  });
 
-window.tuieditor.mdEditor.el.addEventListener('keydown', function(event) {
-  if (event.key === 'Enter' && event.ctrlKey) {
-    // Your code here
-    let currentLineString=getCurrentLineString(editorContainer);
-    console.log('Ctrl + Enter was pressed:',currentLineString);
-    let prompt = ' ';
-    let selectText = window.getSelection().toString();
-    utils.displayMarkdown(`${prompt} **${selectText.length >= 1 ? selectText : currentLineString}** ...`);
-    utils.AIComplete(`${prompt} **${selectText.length >= 1 ? selectText : currentLineString}** `);
-  }
-});
 
-document.body.addEventListener('keydown', event=>{
-  if (event.key === 'Enter' && event.ctrlKey) {
-    // Your code here
-    tuieditor.mdEditor.focus();
+  window.tuieditor.mdEditor.el.addEventListener('keydown', function (event) {
+    if (event.key === 'Enter' && event.ctrlKey) {
+      // Your code here
+      let currentLineString = getCurrentLineString(editorContainer);
+      console.log('Ctrl + Enter was pressed:', currentLineString);
+      let prompt = ' ';
+      let selectText = window.getSelection().toString();
+      utils.displayMarkdown(`${prompt} **${selectText.length >= 1 ? selectText : currentLineString}** ...`);
+      utils.AIComplete(`${prompt} **${selectText.length >= 1 ? selectText : currentLineString}** `);
+    }
+  });
 
-    console.log('body Ctrl + Enter was pressed:');
-  }
-});
+  document.body.addEventListener('keydown', event => {
+    if (event.key === 'Enter' && event.ctrlKey) {
+      // Your code here
+      tuieditor.mdEditor.focus();
 
-let url_div=document.querySelector('#url_div');
-url_div.innerText=window.location.href;
-url_div.addEventListener('click',()=>{
-  url_div.scrollIntoView({ behavior: 'smooth' });
-})
+      console.log('body Ctrl + Enter was pressed:');
+    }
+  });
+
+  let url_div = document.querySelector('#url_div');
+  url_div.innerText = window.location.href;
+  url_div.addEventListener('click', () => {
+    url_div.scrollIntoView({ behavior: 'smooth' });
+  })
 
 
 }, 1000);
@@ -159,22 +180,22 @@ const editorchange = new CustomEvent('editorchange', {
   cancelable: true
 });
 
-document.addEventListener('editorchange', ()=>{
+document.addEventListener('editorchange', () => {
   console.log('editorchange');
-  editorModel.lastChangeTime=Date.now();
+  editorModel.lastChangeTime = Date.now();
   syncNote();
-  
+
 })
 
-let setChangeTimeoutid=0;
-document.addEventListener('keydown', ()=>{
+let setChangeTimeoutid = 0;
+document.addEventListener('keydown', () => {
   console.log('keydown');
   clearTimeout(setChangeTimeoutid);
-  setChangeTimeoutid=setTimeout(() => {
-  document.body.dispatchEvent(editorchange)
+  setChangeTimeoutid = setTimeout(() => {
+    document.body.dispatchEvent(editorchange)
 
   }, 5000);
-  
+
 })
 
 document.body.addEventListener('paste', (event) => {
@@ -214,9 +235,9 @@ console.log(noteid);
 
 
 async function initEditorModel() {
-  editorModel.noteid= getUrlParameter('noteid') || Date.now();
+  editorModel.noteid = getUrlParameter('noteid') || Date.now();
   setUrlParameter('noteid', editorModel.noteid);
-  console.log('initEditorModel',editorModel);
+  console.log('initEditorModel', editorModel);
   getNote();
 
 }
@@ -230,14 +251,14 @@ setInterval(async () => {
 }, 3000)
 
 
-async function getNote(){
+async function getNote() {
   let res = await fetch(`/kv/get?key=${editorModel.noteid}`);
   res = await res.json();
   console.log('getNote:', res);
   if (res) {
-    res=res.value;
+    res = res.value;
     editorModel.value = res.text;
-    editorModel.lastChangeTime=res.lastChangeTime || 0;
+    editorModel.lastChangeTime = res.lastChangeTime || 0;
     tuieditor.setMarkdown(res.text)
   }
 }
@@ -261,30 +282,30 @@ async function saveNote() {
 }
 
 
-async function syncNote(){
+async function syncNote() {
   try {
     let res = await fetch(`/kv/get?key=${editorModel.noteid}`);
-  res = await res.json();
-  console.log('getNote in syncNote:', res);
-  if (res) {
-    res=res.value;
-    if(res.lastChangeTime>editorModel.lastChangeTime){
-    console.log(res.lastChangeTime,editorModel.lastChangeTime);
-    editorModel.value = res.text;
-    editorModel.lastChangeTime=res.lastChangeTime || 0;
-    tuieditor.setMarkdown(res.text);
+    res = await res.json();
+    console.log('getNote in syncNote:', res);
+    if (res) {
+      res = res.value;
+      if (res.lastChangeTime > editorModel.lastChangeTime) {
+        console.log(res.lastChangeTime, editorModel.lastChangeTime);
+        editorModel.value = res.text;
+        editorModel.lastChangeTime = res.lastChangeTime || 0;
+        tuieditor.setMarkdown(res.text);
 
+      }
+      else {
+        saveNote();
+      }
     }
-    else{
-      saveNote();
-    }
-  }
-  
+
   } catch (error) {
-    console.log('syncNote eroor:',error);
-    saveNote();    
+    console.log('syncNote eroor:', error);
+    saveNote();
   }
-  
+
 }