import { API, BlockTool, BlockToolData, ToolConfig } from "@editorjs/editorjs";
import ReactDOM from "react-dom";
import WebsiteQuestionComponent from "./WebsiteQuestionComponent";
export interface WebsiteQuestionData extends BlockToolData {
label: string;
help: string;
placeholder: string;
required: boolean;
}
export default class WebsiteQuestion implements BlockTool {
settings: { name: string; icon: string }[];
api: API;
data: WebsiteQuestionData;
nodes: { holder: HTMLElement };
config: ToolConfig;
static get toolbox(): { icon: string; title?: string } {
return {
icon: ``,
title: "Website Question",
};
}
constructor({ api, config, data }: { api: API; config?: ToolConfig; data?: WebsiteQuestionData }) {
this.api = api;
this.config = config;
this.settings = [
{
name: "required",
icon: ``,
},
];
this.data = {
label: data.label || "",
help: data.help || "",
placeholder: data.placeholder || "https://",
required: data.required || false,
};
this.nodes = {
holder: null,
};
}
renderSettings(): HTMLElement {
const wrapper = document.createElement("div");
this.settings.forEach((tune) => {
let button = document.createElement("div");
button.classList.add("cdx-settings-button");
button.classList.toggle("cdx-settings-button--active", this.data[tune.name]);
button.innerHTML = tune.icon;
wrapper.appendChild(button);
button.addEventListener("click", () => {
this._toggleTune(tune.name);
button.classList.toggle("cdx-settings-button--active");
});
});
return wrapper;
}
/**
* @private
* Click on the Settings Button
* @param {string} tune — tune name from this.settings
*/
_toggleTune(tune: string) {
if (tune === "required") {
this.data.required = !this.data.required;
}
}
render(): HTMLElement {
const rootNode = document.createElement("div");
this.nodes.holder = rootNode;
const onDataChange = (newData: WebsiteQuestionData) => {
this.data = {
...newData,
};
};
ReactDOM.render(, rootNode);
return this.nodes.holder;
}
save() {
return this.data;
}
}