show html textarea

app/javascript/elements/markdown_editor.js

@@ -36,15 +36,11 @@ function loadTiptap () {
 }
 
 class LinkTooltip {
-  constructor (container, editor) {
+  constructor (container, editor, templateEl) {
     this.container = container
     this.editor = editor
 
-    const template = document.createElement('template')
-
-    template.innerHTML = container.dataset.linkTooltipHtml
-
-    this.tooltip = template.content.firstElementChild
+    this.tooltip = templateEl.content.firstElementChild.cloneNode(true)
 
     this.input = this.tooltip.querySelector('input')
     this.saveButton = this.tooltip.querySelector('[data-role="link-save"]')
@@ -140,7 +136,8 @@ export default actionable(targetable(class extends HTMLElement {
     'boldButton',
     'italicButton',
     'underlineButton',
-    'linkButton'
+    'linkButton',
+    'linkTooltipTemplate'
   ]
 
   async connectedCallback () {
@@ -256,7 +253,7 @@ export default actionable(targetable(class extends HTMLElement {
       }
     })
 
-    this.linkTooltip = new LinkTooltip(this, this.editor)
+    this.linkTooltip = new LinkTooltip(this, this.editor, this.linkTooltipTemplate)
   }
 
   adjustShortcutsForPlatform () {

app/views/personalization_settings/_markdown_editor.html.erb

@@ -1,4 +1,10 @@
-<% link_tooltip_html = capture do %>
+<% if value.to_s.start_with?('<html') %>
+  <autoresize-textarea>
+    <%= text_area_tag name, value, required: true, class: 'base-input w-full py-2 !rounded-2xl', dir: 'auto', style: 'max-height: 400px' %>
+  </autoresize-textarea>
+<% else %>
+  <markdown-editor>
+    <template data-target="markdown-editor.linkTooltipTemplate">
       <div class="hidden absolute flex bg-white border border-base-300 rounded-xl shadow p-1 gap-1 items-center z-50" contenteditable="false">
         <input type="text" placeholder="<%= t('enter_a_url_or_variable_name') %>" class="rounded-lg border border-base-300 px-2 py-1 text-sm outline-none" style="field-sizing: content; min-width: 205px; max-width: 320px;" autocomplete="off">
         <button type="button" data-role="link-save" class="flex items-center px-1 w-6 h-6 rounded hover:bg-success/10 cursor-pointer">
@@ -8,8 +14,7 @@
           <%= svg_icon('x', class: 'w-4 h-4 text-error') %>
         </button>
       </div>
-<% end %>
-<markdown-editor data-link-tooltip-html="<%= link_tooltip_html.squish %>">
+    </template>
     <div class="border border-base-content/20 rounded-2xl bg-white">
       <div class="flex items-center px-2 py-2 border-b" style="height: 42px;">
         <div class="flex items-center gap-1">
@@ -67,4 +72,5 @@
       <div data-target="markdown-editor.editorElement"></div>
     </div>
     <%= hidden_field_tag name, value, required: true, data: { target: 'markdown-editor.textarea' } %>
-</markdown-editor>
+  </markdown-editor>
+<% end %>