import { API, BlockTool, BlockToolData, ToolConfig } from "@editorjs/editorjs";
import ReactDOM from "react-dom";
//styles imports in angular.json
interface NumberQuestionData extends BlockToolData {
label: string;
placeholder: string;
required: boolean;
}
export default class NumberQuestion implements BlockTool {
settings: { name: string; icon: string }[];
api: API;
data: any;
wrapper: undefined | HTMLElement;
static get toolbox(): { icon: string; title?: string } {
return {
icon: ``,
title: "Number Question",
};
}
constructor({
data,
}: {
api: API;
config?: ToolConfig;
data?: NumberQuestionData;
}) {
this.wrapper = undefined;
this.settings = [
{
name: "required",
icon: ``,
},
];
this.data = data;
this.data = {
label: data.label || "",
placeholder: data.placeholder || "",
required: data.required !== undefined ? data.required : true,
};
}
save(block: HTMLDivElement) {
return {
...this.data,
label: (
block.firstElementChild.firstElementChild
.firstElementChild as HTMLInputElement
).value,
placeholder: (
block.firstElementChild.lastElementChild as HTMLInputElement
).value,
};
}
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) {
this.wrapper.classList.toggle(tune.name, !!this.data[tune.name]);
if (tune === "required") {
this.data.required = !this.data.required;
this.wrapper.childNodes[0].childNodes[0].childNodes[1].textContent = this
.data.required
? "*"
: "";
}
}
render(): HTMLElement {
this.wrapper = document.createElement("div");
const toolView = (
);
ReactDOM.render(toolView, this.wrapper);
return this.wrapper;
}
}