@cloudcannon/editable-regions 0.0.2

package/styles/editable-component.css

@@ -0,0 +1,8 @@
+editable-component {
+	display: block;
+}
+
+editable-component,
+[data-editable="component"] {
+	position: relative;
+}

package/styles/editable-image.css

@@ -0,0 +1,4 @@
+editable-image,
+[data-editable="image"] {
+	cursor: pointer;
+}

package/styles/editable-snippet.css

@@ -0,0 +1,12 @@
+editable-snippet {
+	cursor: pointer;
+	position: relative;
+
+	&[data-cms-snippet-type="block"] {
+		display: block;
+	}
+
+	&[data-cms-snippet-type="inline"] {
+		display: inline-block;
+	}
+}

package/styles/editable-source.css

@@ -0,0 +1,3 @@
+editable-source {
+	display: block;
+}

package/styles/editable-text.css

@@ -0,0 +1,3 @@
+editable-text {
+	display: inline-block;
+}

package/styles/index.css

@@ -0,0 +1,101 @@
+@import "./editable-array-item.css";
+@import "./editable-text.css";
+@import "./editable-component.css";
+@import "./editable-image.css";
+@import "./editable-source.css";
+@import "./editable-snippet.css";
+
+editable-array-item-controls,
+editable-component-controls {
+	transition: opacity var(--ccve-transition-duration) ease;
+}
+
+editable-array-item,
+editable-text,
+editable-component,
+editable-image,
+editable-source,
+editable-snippet,
+[data-editable="array-item"],
+[data-editable="text"],
+[data-editable="component"],
+[data-editable="image"],
+[data-editable="source"] {
+	transition: outline var(--ccve-transition-duration) ease;
+
+	outline-offset: calc(var(--ccve-editable-outline-width) * -1);
+	outline: var(--ccve-editable-outline-width) solid transparent;
+
+	& > editable-array-item-controls,
+	& > editable-component-controls {
+		opacity: 0;
+		pointer-events: none;
+		display: none;
+
+		&:hover,
+		&[open="true"] {
+			opacity: 1;
+			pointer-events: auto;
+			display: flex;
+		}
+	}
+
+	&.errored {
+		outline: none !important;
+		cursor: default !important;
+	}
+
+	&.dragover * {
+		opacity: 0.8;
+	}
+}
+
+.cms-region-highlighted {
+	editable-array-item,
+	editable-text,
+	editable-component,
+	editable-image,
+	editable-source,
+	editable-snippet,
+	[data-editable="array-item"],
+	[data-editable="text"],
+	[data-editable="component"],
+	[data-editable="image"],
+	[data-editable="source"] {
+		outline: var(--ccve-editable-outline-width) solid var(--ccve-color-sol);
+
+		&:hover {
+			outline: var(--ccve-editable-outline-width) solid
+				var(--ccve-color-emerald);
+
+			& > editable-array-item-controls,
+			& > editable-component-controls {
+				opacity: 1;
+				pointer-events: auto;
+				display: flex;
+			}
+		}
+	}
+}
+
+.dragging {
+	& editable-array-item,
+	& editable-text,
+	& editable-component,
+	& editable-image,
+	& editable-source,
+	& editable-snippet,
+	& [data-editable="array-item"],
+	& [data-editable="text"],
+	& [data-editable="component"],
+	& [data-editable="image"],
+	& [data-editable="source"] {
+		transition: none;
+		outline: none;
+
+		&:hover {
+			transition: none;
+			outline: none;
+		}
+	}
+}

package/styles/index.ts

@@ -0,0 +1,6 @@
+import styles from "./index.css?inline";
+
+const stylesEl = document.createElement("style");
+stylesEl.innerHTML = styles;
+
+document.head.appendChild(stylesEl);

package/styles/ui/editable-component-controls.css

@@ -0,0 +1,104 @@
+:host {
+	position: absolute;
+	z-index: 99999999999;
+	top: var(--ccve-editable-outline-width);
+	right: var(--ccve-editable-outline-width);
+	text-rendering: geometricprecision;
+	-webkit-font-smoothing: antialiased;
+	display: flex;
+	flex-direction: column;
+	align-items: end;
+}
+
+.button-row {
+	display: flex;
+	background: #fff;
+	gap: 12px;
+	padding: 6px;
+	margin: 4px;
+	border-radius: var(--ccve-border-radius);
+	width: fit-content;
+	border: 1px solid #eee;
+	box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
+
+	& button {
+		width: 36px;
+		height: 36px;
+
+		&:hover {
+			background-color: var(--ccve-color-cc-blue);
+			--cc-icon-fill: var(--ccve-color-cloud);
+		}
+	}
+}
+
+.context-menu {
+	animation: fade-in-up ease 0.2s;
+	border-radius: var(--ccve-border-radius);
+	background: #fff;
+	gap: 12px;
+	padding: 10px 6px;
+	margin: 4px;
+	width: 154px;
+	border: 1px solid #eee;
+	box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
+	border: 2px solid #cfcfcf;
+	display: none;
+	pointer-events: none;
+
+	& li {
+		list-style: none;
+	}
+
+	& button {
+		line-height: 24px;
+		padding: 10px;
+		gap: 10px;
+		max-width: 100%;
+		display: flex;
+		align-items: center;
+		font-family: "TT Norms Pro", helvetica, arial, sans-serif;
+		font-size: 16px;
+	}
+
+	&.open {
+		display: block;
+		pointer-events: auto;
+	}
+}
+
+button {
+	background-color: transparent;
+	border: 0;
+	padding: 0;
+
+	border-radius: var(--ccve-border-radius);
+	cursor: pointer;
+
+	&[draggable="true"] {
+		cursor: grab;
+	}
+
+	&:disabled {
+		color: #979797;
+		--cc-icon-fill: #979797;
+		cursor: not-allowed;
+
+		&:hover {
+			background-color: transparent;
+			--cc-icon-fill: #979797;
+		}
+	}
+}
+
+@keyframes fade-in-up {
+	from {
+		opacity: 0.5;
+		transform: scale(0.9);
+	}
+
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}

package/styles/ui/editable-region-error-card.css

@@ -0,0 +1,25 @@
+.container {
+	all: initial;
+	font-family: var(--ccrt-font-family);
+
+	display: flex;
+	background-color: #ffe7ea;
+	border-radius: var(--ccve-border-radius);
+	padding: var(--ccrt-gap);
+	margin: 2px;
+	border: 2px solid var(--ccve-color-ruby);
+	gap: var(--ccrt-gap);
+}
+
+.heading {
+	font-size: 1.15em;
+	margin-top: 0px;
+}
+
+pre {
+	margin-bottom: 0;
+}
+
+cc-icon {
+	--cc-icon-fill: var(--ccve-color-ruby);
+}

package/types/astro.d.ts

@@ -0,0 +1,19 @@
+/// <reference path="./cloudcannon.d.ts" />
+
+declare module "@cloudcannon/editable-regions/astro-integration" {
+	import type { AstroIntegration } from "astro";
+
+	export default function (): AstroIntegration;
+}
+
+declare module "@cloudcannon/editable-regions/astro" {
+	export function registerAstroComponent(key: string, component: unknown): void;
+	export function addFrameworkRenderer(renderer: any): void;
+	export function queueForClientSideRender(
+		renderFunction: (node: Element) => void,
+	): number;
+}
+
+declare module "@cloudcannon/editable-regions/astro-react-renderer" {
+	// Side-effect only module that registers React renderer
+}

package/types/cloudcannon.d.ts

@@ -0,0 +1,11 @@
+export {};
+
+declare global {
+	var ENV_CLIENT: boolean;
+	var inEditorMode: boolean;
+	var CloudCannonAPI: CloudCannonJavascriptApiRouter | undefined;
+	var CloudCannon:
+		| CloudCannonJavaScriptV0API
+		| CloudCannonJavaScriptV1API
+		| undefined;
+}

package/types/modules.d.ts

@@ -0,0 +1,12 @@
+declare module "astro/runtime/server/index.js" {
+	export function renderSlotToString(result: any, slot: any): string;
+	export function renderToString(
+		result: any,
+		component: any,
+		props: any,
+		slots: any,
+	): Promise<string>;
+}
+declare module "react-dom/server.browser" {
+	export function renderToStaticMarkup(element: any): string;
+}

package/types/react.d.ts

@@ -0,0 +1,5 @@
+/// <reference path="./cloudcannon.d.ts" />
+
+declare module "@cloudcannon/editable-regions/react" {
+	export function registerReactComponent(key: string, component: unknown): void;
+}

package/types/vite.d.ts

@@ -0,0 +1,9 @@
+declare module "*?inline" {
+	const content: string;
+	export default content;
+}
+
+declare module "*.astro" {
+	const component: any;
+	export default component;
+}