block editor
This commit is contained in:
@@ -4,32 +4,35 @@
|
||||
import BlockElements from "./BlockElements.svelte";
|
||||
import {flip} from "svelte/animate";
|
||||
import {quintOut} from 'svelte/easing';
|
||||
|
||||
import {getContext} from "svelte";
|
||||
const channel = getContext("channel");
|
||||
export let record;
|
||||
export let field;
|
||||
export let value = [];
|
||||
export let schemas;
|
||||
export let graph;
|
||||
|
||||
let blockSchema = channel.schemas.find((s) => s.name === field.schema);
|
||||
|
||||
</script>
|
||||
|
||||
<div class="inline-card-wrapper">
|
||||
<BlockButtons
|
||||
bind:blockData={value}
|
||||
/>
|
||||
</div>
|
||||
{#each value as blockItemData (blockItemData.id)}
|
||||
<div class="block-field-wrapper" animate:flip="{{delay: 250, duration: 250, easing: quintOut}}">
|
||||
<BlockElements
|
||||
bind:block={blockItemData}
|
||||
{record}
|
||||
{field}
|
||||
{schemas}
|
||||
bind:graph
|
||||
/>
|
||||
|
||||
<div class=" bg-light lx-card">
|
||||
<div class="inline-card-wrapper">
|
||||
<BlockButtons
|
||||
bind:blockData={value}
|
||||
bind:blockData={value}
|
||||
{blockSchema}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
{#each value as blockItemData (blockItemData.id)}
|
||||
<div class="block-field-wrapper" animate:flip="{{delay: 250, duration: 250, easing: quintOut}}">
|
||||
<BlockElements
|
||||
bind:block={blockItemData}
|
||||
bind:blockData={value}
|
||||
{record}
|
||||
{field}
|
||||
bind:graph
|
||||
/>
|
||||
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
</div>
|
||||
@@ -1,50 +1,44 @@
|
||||
<script>
|
||||
import Icon from "../../common/Icon.svelte";
|
||||
import {randomId} from "../../../helpers";
|
||||
import {insertBlock} from "./block";
|
||||
|
||||
export let blockId;
|
||||
export let blockData;
|
||||
export let blockSchema;
|
||||
$: showOptions = false;
|
||||
let validUis = ["text", "textarea", "rich", "reference"];
|
||||
let validUis = ["heading", "textarea", "rich", "reference"];
|
||||
|
||||
function createBlock(e, validUI) {
|
||||
function createBlock(e, ui) {
|
||||
e.preventDefault();
|
||||
blockData = [...blockData, {
|
||||
ui: validUI,
|
||||
id: randomId(),
|
||||
key: "",
|
||||
value: null
|
||||
}];
|
||||
blockData = insertBlock(blockData,ui);
|
||||
showOptions = false;
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<div class="d-flex justify-content-left mb-2 ">
|
||||
<button
|
||||
type="button"
|
||||
class:is-first={!blockId}
|
||||
class=" btn btn-lg btn-link text-decoration-none block-buttons"
|
||||
on:click|preventDefault={(e) => (showOptions = !showOptions)}
|
||||
>
|
||||
<Icon width={24} height={24} icon="circle-plus"/>
|
||||
</button>
|
||||
{#if showOptions}
|
||||
<div class="d-flex ">
|
||||
{#each blockSchema.fields as validUi}
|
||||
<div class="ms-2">
|
||||
<button
|
||||
class="btn btn-sm btn-primary"
|
||||
on:click={(e) => createBlock(e, validUi)}
|
||||
>{validUi.label}
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class:is-first={!blockId}
|
||||
class=" btn btn-lg btn-link text-decoration-none block-buttons"
|
||||
on:click|preventDefault={(e) => (showOptions = !showOptions)}
|
||||
>
|
||||
<Icon width={24} height={24} icon="circle-plus"/>
|
||||
</button>
|
||||
|
||||
|
||||
{#if showOptions}
|
||||
<div class="bg-light lx-card d-flex">
|
||||
{#each validUis as validUi}
|
||||
|
||||
<div class="me-2">
|
||||
<button
|
||||
class="btn btn-sm btn-primary"
|
||||
on:click={(e) => createBlock(e, validUi)}
|
||||
>{validUi}
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{/if}
|
||||
</div>
|
||||
<style>
|
||||
:global(.block-field-wrapper) {
|
||||
display: flex;
|
||||
@@ -61,9 +55,8 @@
|
||||
}
|
||||
|
||||
.block-buttons {
|
||||
/* padding: 0 5px; */
|
||||
display: inline-block;
|
||||
padding: 0px;
|
||||
z-index: 1;
|
||||
margin: 10px auto 0;
|
||||
margin: 0px ;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,43 +1,100 @@
|
||||
<script>
|
||||
import Text from "./elements/Text.svelte";
|
||||
import Heading from "./elements/Heading.svelte";
|
||||
import Textarea from "./elements/Textarea.svelte";
|
||||
import Rich from "./elements/Rich.svelte";
|
||||
import Reference from "./elements/Reference.svelte";
|
||||
import Icon from "../../common/Icon.svelte";
|
||||
import {insertBlock} from "./block";
|
||||
import { getContext} from "svelte";
|
||||
import File from "./elements/File.svelte";
|
||||
|
||||
const channel = getContext("channel");
|
||||
export let record;
|
||||
export let blockData;
|
||||
export let field;
|
||||
export let schemas;
|
||||
export let graph;
|
||||
|
||||
export let block;
|
||||
let blockSchema = channel.schemas.find((s) => s.name === field.schema);
|
||||
function createBlock(e, ui, blockId) {
|
||||
e.preventDefault();
|
||||
blockData = insertBlock(blockData, ui, blockId);
|
||||
}
|
||||
|
||||
function deleteBlock(e, blockId) {
|
||||
e.preventDefault();
|
||||
blockData = blockData.filter(b => b.id !== blockId)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="card editor-field bg-light lx-card d-flex">
|
||||
<span class="text-muted d-block fs-6 mb-1">{block.ui}</span>
|
||||
{#if block.ui === "text"}
|
||||
<div class="card editor-field d-flex">
|
||||
<div class="d-flex justify-content-between">
|
||||
<span class="text-muted d-block fs-6 mb-1">{block.meta.label} <i>{block.meta.info.name}</i> </span>
|
||||
<div class="dropdown d-inline-block">
|
||||
<button
|
||||
class="btn btn-link btn-sm"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<Icon icon="ellipsis"/>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
|
||||
<Text
|
||||
bind:block={block}
|
||||
<h6 class="dropdown-header">
|
||||
Block id: <input class="form-control-plaintext" readonly value={block.id}/>
|
||||
Block name: <input class="form-control-plaintext" readonly value={block.meta.name}/>
|
||||
</h6>
|
||||
<h6 class="dropdown-header">Actions</h6>
|
||||
<button
|
||||
class="dropdown-item"
|
||||
on:click={(e) => deleteBlock(e, block.id)}
|
||||
>Delete
|
||||
</button
|
||||
>
|
||||
<h6 class="dropdown-header">Insert after</h6>
|
||||
|
||||
{#each blockSchema.fields as blockField}
|
||||
<button
|
||||
class="dropdown-item"
|
||||
on:click={(e) => createBlock(e, blockField, block.id)}
|
||||
>{blockField.label}
|
||||
</button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if block.meta.info.name === "heading"}
|
||||
|
||||
<Heading
|
||||
bind:block={block}
|
||||
/>
|
||||
|
||||
{:else if block.ui === "textarea"}
|
||||
{:else if block.meta.info.name === "textarea"}
|
||||
|
||||
<Textarea
|
||||
bind:block={block}
|
||||
bind:block={block}
|
||||
/>
|
||||
|
||||
{:else if block.ui === "rich"}
|
||||
{:else if block.meta.info.name === "rich"}
|
||||
<Rich
|
||||
bind:block={block}
|
||||
bind:block={block}
|
||||
/>
|
||||
{:else if block.ui === "reference"}
|
||||
{:else if block.meta.info.name === "file"}
|
||||
<File
|
||||
{record}
|
||||
{field}
|
||||
bind:graph
|
||||
bind:block={block}
|
||||
/>
|
||||
{:else if block.meta.info.name === "reference"}
|
||||
<Reference
|
||||
{record}
|
||||
{field}
|
||||
{schemas}
|
||||
bind:graph
|
||||
bind:block={block}
|
||||
{record}
|
||||
{field}
|
||||
bind:graph
|
||||
bind:block={block}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import {randomId} from "../../../helpers.js";
|
||||
|
||||
export function insertBlock(blockData, blockField, afterBlockId = null) {
|
||||
|
||||
if (!afterBlockId) {
|
||||
return [{
|
||||
meta: blockField,
|
||||
id: randomId(),
|
||||
value: null
|
||||
}, ...blockData];
|
||||
}
|
||||
|
||||
return blockData.reduce((carry, block) => {
|
||||
carry.push(block)
|
||||
if (block.id === afterBlockId) {
|
||||
carry.push({
|
||||
meta: blockField,
|
||||
id: randomId(),
|
||||
value: null
|
||||
});
|
||||
}
|
||||
return carry;
|
||||
}, []);
|
||||
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
<script>
|
||||
import {getContext} from "svelte";
|
||||
import PreviewCard from "../../PreviewCard.svelte";
|
||||
import {sortByField} from "../../../edges/sortEdges";
|
||||
import ReferenceInlineButtons from "../../elements/ReferenceInlineButtons.svelte"
|
||||
import Sortable from "../../../libs/Sortable.svelte";
|
||||
import {insertEdges} from "../../elements/reference";
|
||||
import BrowseModal from "../../elements/BrowseModal.svelte";
|
||||
|
||||
|
||||
const channel = getContext("channel");
|
||||
export let block;
|
||||
export let record;
|
||||
export let field;
|
||||
export let graph;
|
||||
let browseModal;
|
||||
let blockFieldName = field.name + ":" + block.id;
|
||||
|
||||
$: references = graph.edges
|
||||
.filter((edge) => edge.field === blockFieldName)
|
||||
.map((edge) => {
|
||||
return graph.records.find((increc) => increc.id === edge.target && record.id === edge.source);
|
||||
}).filter((rec) => (rec?.id ? true : false)) ?? [];
|
||||
|
||||
let collections = channel.schemas.filter((aschema) =>
|
||||
block.meta.collections.includes(aschema.name)
|
||||
);
|
||||
|
||||
function removeReference(e) {
|
||||
e.preventDefault();
|
||||
graph.edges = graph.edges.filter(
|
||||
(edge) => !(edge.target === e.detail && edge.field === blockFieldName)
|
||||
);
|
||||
block.value = graph.edges.filter(edge => edge.field === blockFieldName) ?? [];
|
||||
|
||||
}
|
||||
|
||||
function openBrowseModal(e, schema) {
|
||||
e.preventDefault();
|
||||
browseModal.open(schema);
|
||||
}
|
||||
|
||||
function reorder(e) {
|
||||
graph.edges = sortByField(e.detail.source, e.detail.target, graph.edges, blockFieldName);
|
||||
}
|
||||
|
||||
function insert(e) {
|
||||
e.preventDefault();
|
||||
browseModal.close();
|
||||
graph = insertEdges(graph,record,e.detail.records,blockFieldName,e.detail.action);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<div class="mb-0">
|
||||
{#if block.meta.collections.length === 1}
|
||||
<button
|
||||
class="btn btn-outline-primary"
|
||||
on:click={(e) => openBrowseModal(e, collections[0].name)}
|
||||
>
|
||||
Browse
|
||||
</button>
|
||||
{:else}
|
||||
<div class="dropdown d-inline-block">
|
||||
<button
|
||||
class="btn btn-outline-primary btn-sm"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Browse
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
{#each collections as collection}
|
||||
<li>
|
||||
<!-- {`${channelurl}/content/${collection.name}?parent=${record.id}&parentfield=${field.name}`} -->
|
||||
<a
|
||||
class="dropdown-item"
|
||||
on:click={(e) =>
|
||||
openBrowseModal(e, collection.name)}
|
||||
href="/">{collection.label}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if references.length > 0}
|
||||
<Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}>
|
||||
{#each references as reference (reference.id)}
|
||||
<div class="col mb-3">
|
||||
<PreviewCard
|
||||
classes="h-100"
|
||||
record={reference}
|
||||
hasDelete={true}
|
||||
on:remove={removeReference}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</Sortable>
|
||||
{/if}
|
||||
|
||||
<BrowseModal bind:this={browseModal} on:insert={insert}/>
|
||||
@@ -1,72 +1,52 @@
|
||||
<script>
|
||||
import {uniq, uniqBy} from "lodash";
|
||||
import {getContext} from "svelte";
|
||||
import PreviewCard from "../../PreviewCard.svelte";
|
||||
import {sortByField} from "../../../edges/sortEdges";
|
||||
import ReferenceInlineButtons from "../../elements/ReferenceInlineButtons.svelte"
|
||||
import Sortable from "../../../libs/Sortable.svelte";
|
||||
import {insertEdges} from "../../elements/reference";
|
||||
|
||||
|
||||
const channel = getContext("channel");
|
||||
export let block;
|
||||
export let record;
|
||||
export let field;
|
||||
export let schemas;
|
||||
export let graph;
|
||||
|
||||
$: references = graph.edges
|
||||
.filter((edge) => edge.field === field.name && block.value?.includes(edge.target))
|
||||
.map((edge) => {
|
||||
return graph.records.find((increc) => increc.data.id === edge.target && record.data.id === edge.source);
|
||||
}).filter((rec) => (rec?.data?.id ? true : false)) ?? [];
|
||||
let blockFieldName = field.name + ":" + block.id;
|
||||
|
||||
let collections = schemas.filter((aschema) =>
|
||||
field.collections.includes(aschema.name)
|
||||
$: references = graph.edges
|
||||
.filter((edge) => edge.field === blockFieldName)
|
||||
.map((edge) => {
|
||||
return graph.records.find((increc) => increc.id === edge.target && record.id === edge.source);
|
||||
}).filter((rec) => (rec?.id ? true : false)) ?? [];
|
||||
|
||||
let collections = channel.schemas.filter((aschema) =>
|
||||
block.meta.collections.includes(aschema.name)
|
||||
);
|
||||
|
||||
function removeReference(e) {
|
||||
e.preventDefault();
|
||||
graph.edges = graph.edges.filter(
|
||||
(edge) => !(edge.target === e.detail && edge.field === field.name)
|
||||
(edge) => !(edge.target === e.detail && edge.field === blockFieldName)
|
||||
);
|
||||
block.value = graph.edges.filter(edge => edge.field === field.name && block.value?.includes(edge.target)).map((edge) => edge.target) ?? [];
|
||||
block.value = graph.edges.filter(edge => edge.field === blockFieldName) ?? [];
|
||||
|
||||
}
|
||||
|
||||
function reorder(e) {
|
||||
graph.edges = sortByField(e.detail.source, e.detail.target, graph.edges, field.name);
|
||||
graph.edges = sortByField(e.detail.source, e.detail.target, graph.edges, blockFieldName);
|
||||
}
|
||||
|
||||
function insert(e) {
|
||||
e.preventDefault();
|
||||
const recordsToInsert = e.detail.records;
|
||||
const action = e.detail.action;
|
||||
let newEdges = recordsToInsert.map((r) => {
|
||||
return {
|
||||
schema: r.schema,
|
||||
target: r.data.id,
|
||||
source: record.data.id,
|
||||
field: field.name,
|
||||
rank: ""
|
||||
};
|
||||
});
|
||||
|
||||
let replacedEdges = graph.edges;
|
||||
let newBlockValue = [];
|
||||
if (action === "replace") {
|
||||
newBlockValue = newEdges.map(edge => edge.target)
|
||||
replacedEdges = replacedEdges.filter((edge) => edge.field !== field.name);
|
||||
} else {
|
||||
newBlockValue = [...block.value ?? [], ...newEdges.map(edge => edge.target)]
|
||||
}
|
||||
block.value = uniq(newBlockValue);
|
||||
graph.records = uniqBy([...graph.records, ...recordsToInsert], (r) => r.data.id);
|
||||
graph.edges = uniqBy([...replacedEdges, ...newEdges], (edge) => edge.target + edge.field);
|
||||
|
||||
graph = insertEdges(graph,record,e.detail.records,blockFieldName,e.detail.action);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="inline-card-wrapper">
|
||||
<ReferenceInlineButtons
|
||||
{field}
|
||||
buttonClass="mt-2"
|
||||
recordId={null}
|
||||
schemas={collections}
|
||||
@@ -76,11 +56,10 @@
|
||||
</div>
|
||||
{#if references.length > 0}
|
||||
<Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}>
|
||||
{#each references as reference (reference.data.id)}
|
||||
{#each references as reference (reference.id)}
|
||||
<div class="col mb-3">
|
||||
<PreviewCard
|
||||
classes="h-100"
|
||||
{schemas}
|
||||
record={reference}
|
||||
hasDelete={true}
|
||||
on:remove={removeReference}
|
||||
|
||||
Reference in New Issue
Block a user