Commit d53f0c97 authored by Noé Gaumont's avatar Noé Gaumont 🐙
Browse files

WIP feat: add description than can be edited with editorJS

readOnly is missing, see https://github.com/codex-team/editor.js/issues/609 implemented in editor 2.19
It should be added once we have the right from the rqlClient or somewhere else


Proper baseUrl handling is also missing
parent 2d0c34ecb320
import React from 'react';
import ReactDOM from 'react-dom';
import React from "react";
import ReactDOM from "react-dom";
import EditorJsContainer from "react-editor-js";
import EditorJS from "@editorjs/editorjs";
import Embed from "@editorjs/embed";
import Table from "@editorjs/table";
import List from "@editorjs/list";
import Warning from "@editorjs/warning";
import Code from "@editorjs/code";
import LinkTool from "@editorjs/link";
import Image from "@editorjs/image";
import Raw from "@editorjs/raw";
import Header from "@editorjs/header";
import Quote from "@editorjs/quote";
import MarkerEdit from "@editorjs/marker";
import CheckList from "@editorjs/checklist";
import Delimiter from "@editorjs/delimiter";
import InlineCode from "@editorjs/inline-code";
import SimpleImage from "@editorjs/simple-image";
import { client } from "@logilab/cwclientlibjs";
import {
ComposableMap,
Geographies,
Geography,
Marker,
Point
Point,
} from "react-simple-maps";
const geoUrl = "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json";
export const EDITOR_JS_TOOLS = {
embed: Embed,
table: Table,
marker: MarkerEdit,
list: List,
warning: Warning,
code: Code,
linkTool: LinkTool,
image: Image,
raw: Raw,
header: Header,
quote: Quote,
checklist: CheckList,
delimiter: Delimiter,
inlineCode: InlineCode,
simpleImage: SimpleImage,
};
const geoUrl =
"https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json";
declare const data: {
name: string,
latitude: number,
longitude: number,
}
name: string;
latitude: number;
longitude: number;
eid: number;
description: any;
};
const MapChart = () => {
return (
<ComposableMap>
<Geographies geography={geoUrl}>
{({ geographies }) =>
geographies
.map(geo => (
<Geography
key={geo.rsmKey}
geography={geo}
fill="#EAEAEC"
stroke="#D6D6DA"
/>
))
geographies.map((geo) => (
<Geography
key={geo.rsmKey}
geography={geo}
fill="#EAEAEC"
stroke="#D6D6DA"
/>
))
}
</Geographies>
<Marker coordinates={[data.longitude, data.latitude] as Point}>
<g
fill="none"
stroke="#FF5533"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
transform="translate(-12, -24)"
>
<circle cx="12" cy="10" r="3" />
<path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z" />
</g>
<text
textAnchor="middle"
y={10}
style={{ fontFamily: "system-ui", fill: "#5D5A6D" }}
>
{data.name}
</text>
</Marker>
<Marker coordinates={[data.longitude, data.latitude] as Point}>
<g
fill="none"
stroke="#FF5533"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
transform="translate(-12, -24)"
>
<circle cx="12" cy="10" r="3" />
<path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z" />
</g>
<text
textAnchor="middle"
y={10}
style={{ fontFamily: "system-ui", fill: "#5D5A6D" }}
>
{data.name}
</text>
</Marker>
</ComposableMap>
);
};
function App() {
return <MapChart/>
// XX to change with some data attribut
const rqlClient = new client.CwRqlClient(
new client.CwSimpleHttpClient("http://localhost:8080", true)
);
const instanceRef = React.useRef<EditorJS | null>(null);
const [editorData, setEditorData] = React.useState<any | null>(null);
async function handleSave() {
if (instanceRef.current !== null) {
const savedData = await instanceRef.current.save();
rqlClient.queryRows(
`Set M description "${JSON.stringify(savedData).replaceAll(
'"',
'\\"'
)}" Where M is Museum, M eid ${data.eid}`
);
}
}
React.useEffect(() => {
rqlClient
.queryRows(`Any D Where M is Museum, M eid ${data.eid}, M description D`)
.then((response) => {
setEditorData(response[0][0]);
});
}, []);
return (
<>
<EditorJsContainer
tools={EDITOR_JS_TOOLS}
data={JSON.parse(data.description)}
instanceRef={(instance) => (instanceRef.current = instance)}
readOnly={false}
/>
<button onClick={handleSave}>SAVE THIS ! </button>
<MapChart />
</>
);
}
const root = document.getElementById("awesome-map");
ReactDOM.render(<App/>, root);
ReactDOM.render(<App />, root);
......@@ -5,7 +5,7 @@
modname = "cubicweb_tuto"
distname = "cubicweb-tuto"
numversion = (0, 1, 0)
numversion = (0, 1, 1)
version = ".".join(str(num) for num in numversion)
license = "LGPL"
......@@ -16,7 +16,7 @@ web = "http://www.cubicweb.org/project/%s" % distname
__depends__ = {
"cubicweb": ">= 3.29.0",
"cubicweb-rqlcontroller": "~= 0.7",
"cubicweb-rqlcontroller": "~= 0.7"
}
__recommends__ = {}
......
# -*- coding: utf-8 -*-
add_attribute("Museum", "description")
commit()
......@@ -18,6 +18,21 @@
"""cubicweb-tuto schema"""
from yams.buildobjs import EntityType, String, Float, SubjectRelation, Int
from yams.constraints import BoundaryConstraint
from yams import MARKER
def EditorJsString(
required: bool = False,
formula=MARKER,
override: bool = False,
**kwargs,
):
return String(
required=required,
formula=formula,
override=override,
**kwargs,
)
class Museum(EntityType):
......@@ -31,6 +46,7 @@ class Museum(EntityType):
is_in = SubjectRelation("City", cardinality="1*")
director = SubjectRelation("Person", cardinality="**")
postal_address = String()
description = EditorJsString()
class City(EntityType):
......
This diff is collapsed.
{
"compilerOptions": {
/* Basic Options */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
"jsx": "react",
/* Strict Type-Checking Options */
"strict": true, /* Enable all strict type-checking options. */
"strict": true /* Enable all strict type-checking options. */,
/* Module Resolution Options */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
"noImplicitAny": false
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment