didadmin/docuseal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

show html textarea

Browse Source
This commit is contained in:
Pete Matsyburka
2026-02-24 11:29:32 +02:00
parent d035525c7a
commit a5716cd518
2 changed files with 77 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/elements/markdown_editor.js
+5 -8
View File
@@ -36,15 +36,11 @@ function loadTiptap () {
} }
class LinkTooltip { class LinkTooltip {
constructor (container, editor) { constructor (container, editor, templateEl) {
this.container = container this.container = container
this.editor = editor this.editor = editor
const template = document.createElement('template') this.tooltip = templateEl.content.firstElementChild.cloneNode(true)
template.innerHTML = container.dataset.linkTooltipHtml
this.tooltip = template.content.firstElementChild
this.input = this.tooltip.querySelector('input') this.input = this.tooltip.querySelector('input')
this.saveButton = this.tooltip.querySelector('[data-role="link-save"]') this.saveButton = this.tooltip.querySelector('[data-role="link-save"]')
@@ -140,7 +136,8 @@ export default actionable(targetable(class extends HTMLElement {
'boldButton', 'boldButton',
'italicButton', 'italicButton',
'underlineButton', 'underlineButton',
'linkButton' 'linkButton',
'linkTooltipTemplate'
] ]
async connectedCallback () { 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 () { adjustShortcutsForPlatform () {
app/views/personalization_settings/_markdown_editor.html.erb
+9 -3
View File
@@ -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"> <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"> <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"> <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') %> <%= svg_icon('x', class: 'w-4 h-4 text-error') %>
</button> </button>
</div> </div>
<% end %> </template>
<markdown-editor data-link-tooltip-html="<%= link_tooltip_html.squish %>">
<div class="border border-base-content/20 rounded-2xl bg-white"> <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 px-2 py-2 border-b" style="height: 42px;">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
@@ -68,3 +73,4 @@
</div> </div>
<%= hidden_field_tag name, value, required: true, data: { target: 'markdown-editor.textarea' } %> <%= hidden_field_tag name, value, required: true, data: { target: 'markdown-editor.textarea' } %>
</markdown-editor> </markdown-editor>
<% end %>