chore: Merge for release

apps/default/main.py

@@ -23,14 +23,14 @@ def increment(state):
     print("The counter has been incremented.")
     _update_message(state)
 
-# Initialise the state
+# Initialize the state
 
-# "_my_private_element" won't be serialised or sent to the frontend,
+# "_my_private_element" won't be serialized or sent to the frontend,
 # because it starts with an underscore
 
 initial_state = wf.init_state({
     "my_app": {
-        "title": "MY APP"
+        "title": "My app"
     },
     "_my_private_element": 1337,
     "message": None,

docs/framework/quickstart.mdx

@@ -56,7 +56,7 @@ writer edit hello-world
 After running this command, you'll see a local URL displayed in your command line. Open this URL in a web browser to access the editor.
 
 <Frame caption="Writer Framework editor opens at https://localhost:4005">
-  <img src="/framework/images/Quickstart/hello-world-editor.png" />
+  <img src="/framework/images/quickstart/hello-world-editor.png" />
 </Frame>
 
 <Steps>
@@ -85,7 +85,7 @@ If you need to disable this protection, use the flag `--enable-remote-edit`.
 
     Experiment with arranging these components on the canvas to create a simple layout.
     <Frame caption="Writer Framework launches the app at https://localhost:3005">
-  <img src="/framework/images/Quickstart/hello-world-preview.png" />
+  <img src="/framework/images/quickstart/hello-world-preview.png" />
 </Frame>
   </Step>
 
@@ -109,7 +109,7 @@ If you need to disable this protection, use the flag `--enable-remote-edit`.
     Change `"AI STARTER"` to something unique, like `"My First Writer App"`. Save the file, and you’ll see the updated name reflected immediately in the editor.
 
     <Frame caption="App name updated in the Writer Framework editor">
-        <img src="/framework/images/Quickstart/hello-world-app-name.png" />
+        <img src="/framework/images/quickstart/hello-world-app-name.png" />
     </Frame>
 </Step>
 

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/builder/BuilderApp.vue

@@ -29,9 +29,7 @@
 					:key="selectedId ?? 'noneSelected'"
 				></BuilderSettings>
 			</div>
-			<BuilderPanelSwitcher
-				class="builderPanelSwitcher"
-			></BuilderPanelSwitcher>
+			<BuilderPanelSwitcher class="panelSwitcher"></BuilderPanelSwitcher>
 		</div>
 
 		<!-- INSTANCE TRACKERS -->
@@ -375,7 +373,7 @@ onMounted(() => {
 	--notificationsDisplacement: calc(var(--builderSettingsWidth) + 24px);
 }
 
-.builderPanelSwitcher {
+.panelSwitcher {
 	grid-column: 2 / 3;
 	grid-row: 3;
 }

src/ui/src/builder/settings/BuilderFieldsAlign.vue

@@ -42,9 +42,9 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
-					:value="subMode"
+					:model-value="subMode"
 					:options="selectOptions"
-					@input="handleInputSelect"
+					@update:model-value="handleInputSelect"
 				/>
 			</div>
 

src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue

@@ -26,6 +26,7 @@
 					<img
 						:alt="`(Icon for ${tool.name})`"
 						:src="`./../../../../components/${tool.type}.svg`"
+						draggable="false"
 						@error="
 							!isImageFallback[tool.type]
 								? handleImageError(

src/ui/src/components/core/base/BaseCollapseButton.vue

@@ -9,21 +9,37 @@
 	</button>
 </template>
 
+<script lang="ts">
+export type Direction =
+	| "left-right"
+	| "top-bottom"
+	| "bottom-top"
+	| "right-left";
+</script>
+
 <script setup lang="ts">
 import { computed, PropType } from "vue";
 
 const props = defineProps({
-	direction: {
-		type: String as PropType<"left-right" | "top-bottom">,
-		required: true,
-	},
+	direction: { type: String as PropType<Direction>, required: true },
 });
 
 const isCollapsed = defineModel({ type: Boolean, required: true });
 
-const icon = computed(() =>
-	props.direction === "left-right" ? "chevron_left" : "keyboard_arrow_up",
-);
+const icon = computed(() => {
+	switch (props.direction) {
+		case "left-right":
+			return "chevron_left";
+		case "top-bottom":
+			return "keyboard_arrow_up";
+		case "right-left":
+			return "chevron_right";
+		case "bottom-top":
+			return "keyboard_arrow_down";
+		default:
+			return "keyboard_arrow_up";
+	}
+});
 </script>
 
 <style scoped>

src/ui/src/components/core/layout/CoreColumn.vue

@@ -17,7 +17,7 @@
 				v-if="isCollapsible"
 				v-model="isCollapsed"
 				class="collapser"
-				direction="left-right"
+				:direction="collapseDirection"
 			/>
 		</div>
 		<div v-if="isCollapsed && fields.title.value" class="collapsedTitle">
@@ -48,7 +48,6 @@ import {
 	startCollapsed,
 	isCollapsible as isCollapsibleField,
 } from "@/renderer/sharedStyleFields";
-import BaseCollapseButton from "../base/BaseCollapseButton.vue";
 
 const description =
 	"A layout component that organizes its child components in columns. Must be inside a Column Container component.";
@@ -100,7 +99,10 @@ export default {
 <script setup lang="ts">
 import { computed, ComputedRef, inject, Ref, ref, watch } from "vue";
 import injectionKeys from "@/injectionKeys";
-import BaseContainer from "../base/BaseContainer.vue";
+import BaseContainer from "@/components/core/base/BaseContainer.vue";
+import BaseCollapseButton from "@/components/core/base/BaseCollapseButton.vue";
+import type { Direction } from "@/components/core/base/BaseCollapseButton.vue";
+
 const instancePath = inject(injectionKeys.instancePath);
 const instanceData = inject(injectionKeys.instanceData);
 const wf = inject(injectionKeys.core);
@@ -138,6 +140,10 @@ const isCollapsibleToRight = computed(
 		columnsData.value?.value?.minimumNonCollapsiblePosition,
 );
 
+const collapseDirection = computed<Direction>(() =>
+	isCollapsibleToRight.value ? "right-left" : "left-right",
+);
+
 const columnsData: ComputedRef<Ref> = computed(() => {
 	for (let i = -1; i > -1 * instancePath.length; i--) {
 		const item = instancePath.at(i);
@@ -212,25 +218,6 @@ watch(
 	flex: 0 0 32px;
 }
 
-.CoreColumn > .header > .collapser > .collapserArrow {
-	transition: all 0.5s ease-in-out;
-	transform: rotate(0deg);
-}
-
-.CoreColumn:not(.collapsibleToRight).collapsed
-	> .header
-	> .collapser
-	> .collapserArrow {
-	transform: rotate(180deg);
-}
-
-.CoreColumn.collapsibleToRight:not(.collapsed)
-	> .header
-	> .collapser
-	> .collapserArrow {
-	transform: rotate(180deg);
-}
-
 .CoreColumn.collapsibleToRight > .header {
 	justify-content: left;
 }

src/ui/src/components/core/layout/CoreSection.vue

@@ -112,6 +112,7 @@ const isCollapsed = ref<boolean>(
 	margin: 16px 16px 0 16px;
 	display: grid;
 	grid-template-columns: 1fr auto;
+	align-items: center;
 }
 .CoreSection__title--collapsed {
 	margin: 16px;

src/ui/src/components/core/layout/CoreSidebar.vue

@@ -137,23 +137,6 @@ onMounted(() => {
 	margin-bottom: 16px;
 }
 
-.collapserContainer > .collapser {
-	flex: 0 0 32px;
-}
-
-.collapserContainer .collapserArrow {
-	transition: all 0.5s ease-in-out;
-	transform: rotate(0deg);
-}
-
-.CoreSidebar.collapsed .collapserArrow {
-	transform: rotate(180deg);
-}
-
-.collapserContainer > .collapser:hover {
-	background: var(--separatorColor);
-}
-
 @media only screen and (max-width: 768px) {
 	.CoreSidebar {
 		min-width: 100%;
@@ -164,9 +147,5 @@ onMounted(() => {
 	.CoreSidebar.collapsed > .collapserContainer {
 		margin-bottom: 0;
 	}
-
-	.collapserContainer > .collapser {
-		transform: rotate(90deg);
-	}
 }
 </style>

src/ui/src/components/workflows/WorkflowsWorkflow.vue

@@ -142,7 +142,6 @@ import { useDragDropComponent } from "@/builder/useDragDropComponent";
 import injectionKeys from "@/injectionKeys";
 
 const renderProxiedComponent = inject(injectionKeys.renderProxiedComponent);
-const instancePath = inject(injectionKeys.instancePath);
 const workflowComponentId = inject(injectionKeys.componentId);
 
 const rootEl: Ref<HTMLElement | null> = ref(null);
@@ -224,9 +223,10 @@ async function handleRun() {
 				callback: () => {
 					isRunning.value = false;
 				},
+				handler: `$runWorkflowById_${workflowComponentId}`,
 			},
 		}),
-		instancePath,
+		null,
 		false,
 	);
 }

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");
 });

src/ui/src/core/index.ts

@@ -316,14 +316,17 @@ export function generateCore() {
 			? getPayloadFromEvent(event)
 			: null;
 		let callback: Function;
+		let handler: string;
 
 		if (event instanceof CustomEvent) {
 			callback = event.detail?.callback;
+			handler = event.detail?.handler;
 		}
 
 		const messagePayload = async () => ({
 			type: event.type,
 			instancePath,
+			handler,
 			payload: await eventPayload,
 		});