feat: support mustache tag in proxy block

src/assets/css/tailwind.css

@@ -93,3 +93,7 @@ pre {
 .ProseMirror img.ProseMirror-selectednode {
   outline: 3px solid #68CEF8;
 }
+
+.input-label {
+  @apply ml-1 text-sm text-gray-600 dark:text-gray-200;
+}

src/background/workflowEngine/blocksHandler/handlerProxy.js

@@ -23,7 +23,16 @@ function setProxy({ data, outputs }) {
     };
 
     if (!isWhitespace(data.host)) {
-      config.rules.singleProxy.host = data.host;
+      let proxyHost = data.host;
+
+      const schemeRegex = /^https?|socks4|socks5/i;
+      if (schemeRegex.test(data.host)) {
+        const [scheme, host] = data.host.split(/:\/\/(.*)/);
+        proxyHost = host;
+        config.rules.singleProxy.scheme = scheme;
+      }
+
+      config.rules.singleProxy.host = proxyHost;
     } else {
       if (data.clearProxy) {
         this.engine.isUsingProxy = false;
@@ -44,10 +53,10 @@ function setProxy({ data, outputs }) {
     }
 
     if (data.port !== 0) {
-      config.rules.singleProxy.port = data.port;
+      config.rules.singleProxy.port = +data.port;
     }
 
-    browser.proxy.settings.set({ value: config, scope: 'regular' }).then(() => {
+    chrome.proxy.settings.set({ value: config, scope: 'regular' }, () => {
       this.engine.isUsingProxy = true;
 
       resolve({

src/components/newtab/workflow/WorkflowBuilderSearchBlocks.vue

@@ -29,6 +29,7 @@
         :placeholder="t('common.search')"
         :style="{ width: state.active ? '250px' : '0px' }"
         type="search"
+        autocomplete="off"
         class="py-2 focus:ring-0 rounded-lg bg-transparent"
         @focus="extractBlocks"
         @blur="clearState"

src/components/newtab/workflow/edit/EditNewTab.vue

@@ -7,9 +7,13 @@
       @change="updateData({ description: $event })"
     />
     <edit-autocomplete v-if="!data.activeTab" class="mt-2">
-      <ui-input
+      <label for="new-tab-url" class="input-label">
+        {{ t('workflow.blocks.new-tab.url') }}
+      </label>
+      <ui-textarea
+        id="new-tab-url"
         :model-value="data.url"
-        :label="t('workflow.blocks.new-tab.url')"
+        rows="1"
         class="w-full"
         autocomplete="off"
         placeholder="http://example.com/"

src/components/newtab/workflow/edit/EditProxy.vue

@@ -1,49 +1,47 @@
 <template>
   <div>
-    <div class="flex items-center mb-2">
-      <ui-select
-        :model-value="data.scheme"
-        label="Scheme"
-        class="mr-2"
-        @change="updateData({ scheme: $event })"
-      >
-        <option v-for="scheme in schemes" :key="scheme" :value="scheme">
-          {{ scheme.toUpperCase() }}
-        </option>
-      </ui-select>
-      <ui-input
-        :model-value="data.port"
-        label="Port"
-        placeholder="443"
-        class="flex-1"
-        type="number"
-        @change="updateData({ port: +$event })"
-      />
-    </div>
     <ui-input
       :model-value="data.host"
-      label="Host"
-      placeholder="1.2.3.4"
+      placeholder="socks5://1.2.3.4"
       class="w-full mb-2"
       @change="updateData({ host: $event })"
-    />
+    >
+      <template #label>
+        <span class="input-label"> Host </span>
+        <v-remixicon
+          title="Supported protocols: http, https, socks4, and socks5"
+          name="riInformationLine"
+          class="inline-block"
+          size="18"
+        />
+      </template>
+    </ui-input>
     <ui-input
+      :model-value="data.port"
+      label="Port"
+      placeholder="443"
+      class="w-full mb-2"
+      @change="updateData({ port: +$event })"
+    />
+    <label for="input-bypass" class="input-label">
+      {{ t('workflow.blocks.proxy.bypass.label') }}
+      <a
+        href="https://developer.chrome.com/docs/extensions/reference/proxy/#bypass-list"
+        target="_blank"
+        rel="noopener"
+      >
+        &#128712;
+      </a>
+    </label>
+    <ui-textarea
+      id="input-bypass"
       :model-value="data.bypassList"
+      rows="1"
       placeholder="example1.com, example2.org"
       class="w-full"
       @change="updateData({ bypassList: $event })"
     >
-      <template #label>
-        {{ t('workflow.blocks.proxy.bypass.label') }}
-        <a
-          href="https://developer.chrome.com/docs/extensions/reference/proxy/#bypass-list"
-          target="_blank"
-          rel="noopener"
-        >
-          &#128712;
-        </a>
-      </template>
-    </ui-input>
+    </ui-textarea>
     <p class="text-gray-600 dark:text-gray-200 text-sm">
       {{ t('workflow.blocks.proxy.bypass.note') }}
     </p>
@@ -69,8 +67,6 @@ const emit = defineEmits(['update:data']);
 
 const { t } = useI18n();
 
-const schemes = ['http', 'https', 'socks4', 'socks5'];
-
 function updateData(value) {
   emit('update:data', { ...props.data, ...value });
 }

src/lib/drawflow.js

@@ -112,7 +112,5 @@ export default function (element, { context, options = {} }) {
     editor.registerNode(name, blockComponents(key).default, { editor }, {});
   });
 
-  console.log(editor);
-
   return editor;
 }

src/utils/shared.js

@@ -161,6 +161,7 @@ export const tasks = {
     outputs: 1,
     maxConnection: 1,
     allowedInputs: true,
+    refDataKeys: ['host', 'port', 'scheme'],
     data: {
       disableBlock: false,
       scheme: 'https',