packages/omni-ui/omni-web/src/plugins/nodes/default.hbs

<div class="flex">
  <div class="flex flex-col h-full bg-opacity-0 border-0" >
    <div class="rete-block">
    <div class='block-header flex flex-row h-8 p-2 ' :class="
      {
        '!bg-blue-500 animate-pulse progress-bar': node.active,
          'blur-xs': !node.data.xOmniEnabled
      }
      ">
      <!-- Copy button -->
      <div class="relative z-20 flex items-center" x-tooltip='Copy' x-show='client.workbench.canEdit'>
        <div x-show="copyNotification" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-x-2" x-transition:enter-end="opacity-100 translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 translate-x-0" x-transition:leave-end="opacity-0 translate-x-2" class="absolute left-0" x-cloak>
        <div class="px-3 h-7 -ml-1.5 items-center flex text-xs bg-black border-r border-black -translate-x-full text-white rounded">
            <span>Copied!</span>
            <div class="absolute right-0 inline-block h-full -mt-px overflow-hidden translate-x-3 -translate-y-2 top-1/2">
                <div class="w-3 h-3 origin-top-left transform rotate-45 bg-black border border-transparent"></div>
            </div>
        </div>
    </div>
    <button @click="onClickCopy(node);" class="flex items-center justify-center w-5 h-5 py-1 text-xs rounded-md cursor-pointer focus:outline-none hover:animate-pulse group">
        <svg x-show="!copyNotification" class="w-5 h-5 stroke-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" class="w-5 h-5"><path stroke="white"  stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" /></svg>
        <svg x-show="copyNotification" class="w-5 h-5 stroke-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" x-cloak><path stroke="white"  stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75" /></svg>
    </button>
</div>
      <div class='block-title flex-grow p-1 mx-1' x-text='getTitle()' x-tooltip="Right-Click to rename" @contextmenu.prevent='if (await rename()){workbench.activeRecipe.setDirty()}'></div>
      <!-- close button -->
      <div x-show='workbench.canEdit' class='hover:animate-pulse  ' @click.stop.prevent='onClickClose(node);' x-tooltip='Remove'>
        <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='h-5 w-5'>
          <path stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' />
        </svg>
      </div>
    </div>
    <div id='block-content'
    class='relative flex items-center justify-center w-full h-full text-xs text-gray-400 content '>
      <div class='block_content' :class='classNameString' :title='node.title'>
        <div :class="
        {
          'blur-xs grayscale': !node.data.xOmniEnabled
        }">

          <!-- Inputs -->
          <template x-for='(input, index) in (inputs(node)||[])' :key='input.name'>
            <div class='input' x-show='client.workbench.canEdit || input?.connections?.length' x-id="['input-socket']">
              <div x-socket:input='input' :id="$id('input-socket')" class='socket input relative' type='input' :title='input.socket.name'></div>
              <div x-show='!input.showControl()' class='input-title' x-text='input.name.charAt(0).toUpperCase() + input.name.slice(1)  ' :for="$id('input-socket')"></div>
              <div x-show='input.showControl()' class='input-control' :for="$id('input-socket')" type='input.control.controlType' :value='value' x-control='input.control' x-data='input.control.component(input.control)' x-html='getInputTemplate()' x-effect="$watch('value', (value) => update())"></div>
            </div>
          </template>
          <template x-for='(control, index) in controls(node)'>
            <div class='control' :key='index' :value='value' x-control='control' x-data='control.component(control)' x-html='getInputTemplate()' x-effect="$watch('value', (value) => update())"></div>
          </template>
          <!-- Outputs -->
          <template x-for='(output) in (outputs(node)||[])'>
            <div class='output' x-show='client.workbench.canEdit || output.connections?.length' :key='output.name' x-id="['output-socket']">
              <div class='output-title' x-text='output.name.charAt(0).toUpperCase() + output.name.slice(1)' :for="$id('output-socket')"></div>
              <div x-socket:output='output' :id="$id('output-socket')" class='socket output' type='output.control.controlType' :title='output.socket.name'></div>
            </div>
          </template>
        </div>
        <div class="flex-grow"></div>
        <div class='block-footer'>
          <div x-show="!client.workbench.readOnly" x-id="['node.data.xOmniEnabled']" class="flex justify-center" x-tooltip="Enable/Disable" @change="client.workbench.activeRecipe.setDirty()">
            <label :for="$id('node.data.xOmniEnabled')" class="relative h-6 w-10 cursor-pointer">
              <input x-model="node.data.xOmniEnabled" type="checkbox" :id="$id('node.data.xOmniEnabled')" class="peer sr-only" />
              <span :class="{ 'bg-gray-400': !node.data.xOmniEnabled, 'bg-gray-400': node.data.xOmniEnabled }" class="absolute inset-0 rounded-full transition"></span>
              <span :class="{ 'text-red-600 start-0': !node.data.xOmniEnabled, 'start-4 text-green-600': node.data.xOmniEnabled }" class="absolute inset-y-0 m-1 inline-flex h-4 w-4 items-center justify-center rounded-full bg-white transition-all">
                <svg xmlns="http://www.w3.org/2000/svg" x-show="!node.data.xOmniEnabled" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" x-show="node.data.xOmniEnabled" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
              </span>
            </label>
          </div>
          <div class="flex-grow"></div>
          <!-- info button -->
          <div class='block-footer block-category-color'
           x-text='node.namespace' x-show='node.namespace' x-tooltip='Show all blocks in this package.' @click.stop.prevent='workbench.showExtension("omni-core-collectionmanager", {type:"block", filter: node.namespace})'>
          </div>
          <div class='block-footer block-category-color' x-tooltip='Show all blocks in this category.' x-text='node.category' x-show='node.category' :class="node.category?.toLowerCase().replace(/ /g,'-') !== 'input' ? node.category?.toLowerCase().replace(/ /g,'-') : ''" @click.stop.prevent='workbench.showExtension("omni-core-collectionmanager", {type:"block", filter: node.category})'>
          </div>
          <div class='text-lg cursor-pointer text-white' x-tooltip="Show Help" @click.stop.prevent='toggleInfo(node);' :class="{
      'stroke-yellow-500 fill-yellow-500': showHelp,
      'stroke-green-800 fill-green-900': !showHelp
    }">
            <svg class='w-5 h-5 ' stroke="current" fill='current' viewBox='0 0 56 56' xmlns='http://www.w3.org/2000/svg'>
              <path d='M 27.9999 51.9063 C 41.0546 51.9063 51.9063 41.0781 51.9063 28 C 51.9063 14.9453 41.0312 4.0937 27.9765 4.0937 C 14.8983 4.0937 4.0937 14.9453 4.0937 28 C 4.0937 41.0781 14.9218 51.9063 27.9999 51.9063 Z M 27.9999 47.9219 C 16.9374 47.9219 8.1014 39.0625 8.1014 28 C 8.1014 16.9609 16.9140 8.0781 27.9765 8.0781 C 39.0155 8.0781 47.8983 16.9609 47.9219 28 C 47.9454 39.0625 39.0390 47.9219 27.9999 47.9219 Z M 27.7890 19.6563 C 29.4999 19.6563 30.8358 18.2968 30.8358 16.6094 C 30.8358 14.8984 29.4999 13.5390 27.7890 13.5390 C 26.0780 13.5390 24.7421 14.8984 24.7421 16.6094 C 24.7421 18.2968 26.0780 19.6563 27.7890 19.6563 Z M 23.8749 40.8906 L 33.4374 40.8906 C 34.3983 40.8906 35.1483 40.2109 35.1483 39.25 C 35.1483 38.3359 34.3983 37.6094 33.4374 37.6094 L 30.5312 37.6094 L 30.5312 25.6797 C 30.5312 24.4141 29.8749 23.5703 28.7030 23.5703 L 24.2733 23.5703 C 23.3358 23.5703 22.5858 24.2968 22.5858 25.2109 C 22.5858 26.1719 23.3358 26.8516 24.2733 26.8516 L 26.8046 26.8516 L 26.8046 37.6094 L 23.8749 37.6094 C 22.9374 37.6094 22.1874 38.3359 22.1874 39.25 C 22.1874 40.2109 22.9374 40.8906 23.8749 40.8906 Z'>
              </path>
            </svg>
          </div>

        </div>
      </div>
    </div>
    </div>
    <div x-show='showHelp' x-data="{editComment: false}" style="min-height: 100px; min-width: 350px"
    class="mt-3 rounded-md bg-yellow-100 drop-shadow-lg border-gray-400 bg-opacity-50 hover:bg-opacity-95 h-full"
    :class="
        {
          'blur-xs grayscale': !node.data.xOmniEnabled
        }">


      <div class="flex flex-row float-right absolute right-2 top-2 ">
        <svg x-show="!editComment" class='w-3 h-3 cursor-pointer mt-0.5 border-0' x-tooltip='Edit'
        @click="editComment=true;await startEditComment($el) " viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
          </svg>
          <svg x-show="editComment" class='w-3 h-3 mt-0.5 cursor-pointer ' x-tooltip='Accept'
          @click="if (await setComment($el)){client.workbench.activeRecipe.setDirty()};editComment=false" viewBox="0 0 24 24" fill="none" stroke="darkgreen" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="9 11 12 14 22 4" />
            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
            <polyline points="9 11 12 14 22 4" />
            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
      </svg>
      <div @click.stop.prevent="toggleInfo(node);"  class="cursor-pointer "> <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='h-4 w-4'>
          <path stroke='black' stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' />
        </svg></div>

      </div>
      <h3 class="p-2 pr-4 first-letter:h-full w-full font-semibold">
        <span x-text="node.title"></span>
      </h3>
      <div :id="'comment_'+node.id"
            @paste.stop.prevent="document.execCommand('insertText', false, ($event.originalEvent || $event).clipboardData.getData('text/plain'))"
       class="p-2 h-full"  x-html="getHelpText(node)" :contenteditable="editComment" :class="{
        'bg-white border-2': editComment,
      }"></div>
    </div>
  </div>

</div>