Merge pull request writer#685 from writer/feat-support-icon-alias

feat: Support icon alias

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "poetry.core.masonry.api"
 
 [tool.poetry]
 name = "writer"
-version = "0.8.2"
+version = "0.8.3rc1"
 description = "An open-source, Python framework for building feature-rich apps that are fully integrated with the Writer platform."
 authors = ["Writer, Inc."]
 readme = "README.md"

src/ui/src/components/workflows/abstract/WorkflowsNode.vue

@@ -1,13 +1,7 @@
 <template>
 	<div class="WorkflowsNode">
 		<div class="title">
-			<img
-				:src="`./../../../../components/${component.type}.svg`"
-				@error="
-					(ev) =>
-						!isImageFallback ? handleImageError(ev) : undefined
-				"
-			/>
+			<img :src="imagePath" />
 			<WorkflowsNodeNamer
 				:component-id="componentId"
 				class="nodeNamer"
@@ -75,7 +69,7 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { computed, inject, ref, watch } from "vue";
+import { computed, inject, onMounted, ref, watch } from "vue";
 import injectionKeys from "@/injectionKeys";
 import { FieldType, WriterComponentDefinition } from "@/writerTypes";
 import WorkflowsNodeNamer from "../base/WorkflowsNodeNamer.vue";
@@ -85,7 +79,7 @@ const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
 const componentId = inject(injectionKeys.componentId);
 const fields = inject(injectionKeys.evaluatedFields);
-const isImageFallback = ref(false);
+const imagePath = ref<string>(null);
 
 const component = computed(() => {
 	const component = wf.getComponentById(componentId);
@@ -110,12 +104,6 @@ const staticOuts = computed<WriterComponentDefinition["outs"]>(() => {
 	return processedOuts;
 });
 
-function handleImageError(ev: Event) {
-	const imageEl = ev.target as HTMLImageElement;
-	imageEl.src = `./../../../../components/workflows_category_${def.value.category}.svg`;
-	isImageFallback.value = true;
-}
-
 function getDynamicKeysFromField(fieldKey: string) {
 	const fieldType = def.value.fields[fieldKey].type;
 	const isToolsField = fieldType == FieldType.Tools;
@@ -154,6 +142,40 @@ function handleOutMousedown(ev: DragEvent, outId: string) {
 	emit("outMousedown", outId);
 }
 
+async function checkIfUrlExists(url: string) {
+	try {
+		const response = await fetch(url, { method: "HEAD" });
+		return response.ok;
+	} catch {
+		return false;
+	}
+}
+
+async function getBestAvailableImagePath() {
+	const paths = [
+		`./../../../../components/${component.value.type}.svg`,
+		`./../../../../components/workflows_category_${def.value.category}.svg`,
+	];
+
+	if (wf.featureFlags.value.includes("custom_block_icons")) {
+		paths.unshift(
+			`./../../../../static/components/${component.value.id}.svg`,
+		);
+	}
+
+	for (let i = 0; i < paths.length; i++) {
+		const path = paths[i];
+		if (await checkIfUrlExists(path)) {
+			return path;
+		}
+	}
+	return "";
+}
+
+onMounted(async () => {
+	imagePath.value = await getBestAvailableImagePath();
+});
+
 watch(isEngaged, () => {
 	emit("engaged");
 });