copy settings to the clipboard

Author: zsviczian

src/core/settings.ts

@@ -3,8 +3,10 @@ import {
   ButtonComponent,
   DropdownComponent,
   getIcon,
+  htmlToMarkdown,
   Modifier,
   normalizePath,
+  Notice,
   PluginSettingTab,
   Setting,
   TextComponent,
@@ -662,6 +664,40 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
       });
     });
 
+    // ------------------------------------------------
+    // Search and Settings to Clipboard
+    // ------------------------------------------------
+
+    const settingActions = containerEl.createDiv("ex-settings-actions");
+    const settingActionsContainer = settingActions.createDiv("setting-item-description ex-setting-actions-container");
+    const clipboardActionEl = settingActionsContainer.createEl("a", {attr: { "aria-label": t("SETTINGS_COPY_TO_CLIPBOARD_ARIA") }});
+    clipboardActionEl.innerHTML = getIcon("clipboard-copy").outerHTML + t("SETTINGS_COPY_TO_CLIPBOARD");
+    clipboardActionEl.onClickEvent(e => {
+      // Get the full HTML content first
+      const fullHtml = containerEl.outerHTML;
+      
+      // Find the index of the first <hr> element
+      const startIndex = fullHtml.indexOf('<hr');
+      
+      // Extract HTML from the first <hr> element onwards
+      const html = startIndex > -1 ? fullHtml.substring(startIndex) : fullHtml;
+
+      function replaceHeading(html:string,level:number):string {
+        const re = new RegExp(`<summary class="excalidraw-setting-h${level}">([^<]+)<\/summary>`,"g");
+        return html.replaceAll(re,`<summary class="excalidraw-setting-h${level}"><h${level}>$1</h${level}></summary>`);
+      }
+
+      let x = replaceHeading(html,1);
+      x = replaceHeading(x,2);
+      x = replaceHeading(x,3);
+      x = replaceHeading(x,4);
+      x = x.replaceAll(/<div class="setting-item-name">([^<]+)<\/div>/g,"<h5>$1</h5>");
+
+      const md = htmlToMarkdown(x);
+      window.navigator.clipboard.writeText(md);
+      new Notice(t("SETTINGS_COPIED_TO_CLIPBOARD"));
+    });
+
     // ------------------------------------------------
     // Saving
     // ------------------------------------------------  

src/lang/locale/en.ts

@@ -205,6 +205,10 @@ export default {
   LINKS_BOOK_ARIA: "Read Sketch Your Mind, my book on Visual Thinking",
   LINKS_BOOK: "Read the Book",
 
+  SETTINGS_COPIED_TO_CLIPBOARD: "Markdown ready on clipboard",
+  SETTINGS_COPY_TO_CLIPBOARD: "Copy as Text",
+  SETTINGS_COPY_TO_CLIPBOARD_ARIA: "Copy the entire settings dialog to the clipboard as Markdown. Ideal for use with tools like ChatGPT to search and understand the settings.",
+
   RELEASE_NOTES_NAME: "Display Release Notes after update",
   RELEASE_NOTES_DESC:
     "<b><u>Toggle ON:</u></b> Display release notes each time you update Excalidraw to a newer version.<br>" +

styles.css

@@ -640,7 +640,7 @@ textarea.excalidraw-wysiwyg, .excalidraw input {
   caret-color: var(--excalidraw-caret-color);
 }
 
-.excalidraw-settings-links-container {
+.excalidraw-settings-links-container, .ex-setting-actions-container {
   display: flex; /* Align SVG and text horizontally */
   align-items: center; /* Center SVG and text vertically */
   text-decoration: none; /* Remove underline from links */
@@ -649,13 +649,20 @@ textarea.excalidraw-wysiwyg, .excalidraw input {
   gap: 0.3em;
 }
 
-.excalidraw-settings-links-container a {
+.excalidraw-settings-links-container {
+  background-color: color-mix(in srgb, var(--color-base-100) 7%, transparent);
+  padding: 0.5em;
+}
+
+.excalidraw-settings-links-container a,
+.ex-setting-actions-container a {
   display: flex; /* Align children horizontally */
   align-items: center; /* Center items vertically */
   text-align: left;
 }
 
-.excalidraw-settings-links-container svg {
+.excalidraw-settings-links-container svg,
+.ex-setting-actions-container svg {
   margin-right: 8px;
   height: 30px;
   width: 30px;