add heading to nocode form preview

2025-12-30 10:19:51 -06:00 · 2022-06-24 21:51:23 +09:00
parent e760cdf29d
commit a7f7a54c95
7 changed files with 7347 additions and 122 deletions
--- a/components/editorjs/Editor.tsx
+++ b/components/editorjs/Editor.tsx
@@ -49,8 +49,6 @@ const Editor = ({ id, autofocus = false, onChange, value }) => {
      },
      autofocus: autofocus,
      tools: {
-        textQuestion: TextQuestion,
-        submitButton: SubmitButton,
        paragraph: {
          class: Paragraph,
          inlineToolbar: true,
@@ -67,6 +65,8 @@ const Editor = ({ id, autofocus = false, onChange, value }) => {
            defaultLevel: 1,
          },
        },
+        textQuestion: TextQuestion,
+        submitButton: SubmitButton,
      },
    });
  };
--- a/components/editorjs/tools/SubmitButton.tsx
+++ b/components/editorjs/tools/SubmitButton.tsx
@@ -40,7 +40,7 @@ export default class TextQuestion implements BlockTool {
  render(): HTMLElement {
    const container = document.createElement("div");
    const toolView = (
-      <div className="inline-flex items-center px-4 py-3 text-sm font-medium text-white bg-gray-700 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+      <div className="inline-flex items-center px-4 py-3 text-sm font-medium text-white bg-gray-700 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
        <div
          contentEditable
          id="label"
@@ -49,7 +49,7 @@ export default class TextQuestion implements BlockTool {
        >
          {this.label}
        </div>
-        <ArrowRightIcon className="w-5 h-5 ml-2 -mr-1" aria-hidden="true" />
+        {/*  <ArrowRightIcon className="w-5 h-5 ml-2 -mr-1" aria-hidden="true" /> */}
      </div>
    );
    ReactDOM.render(toolView, container);
--- a/components/editorjs/tools/TextQuestion.tsx
+++ b/components/editorjs/tools/TextQuestion.tsx
@@ -49,7 +49,7 @@ export default class TextQuestion implements BlockTool {
    const container = document.createElement("div");
    const toolView = (
      <div className="pb-5">
-        <div className="text-lg font-bold leading-7 text-gray-800 sm:text-xl sm:truncate">
+        <div className="font-bold leading-7 text-gray-800 text-md sm:truncate">
          <input
            type="text"
            id="label"
--- a/components/frontend/App.tsx
+++ b/components/frontend/App.tsx
@@ -30,19 +30,30 @@ export default function App({ id = "", formId, draft = false }) {
            {page.blocks.map((block) => (
              <div key={block.id}>
                {block.type === "paragraph" ? (
-                  <p key={block.id}>{block.data.text}</p>
+                  <p className="ce-paragraph">{block.data.text}</p>
+                ) : block.type === "header" ? (
+                  block.data.level === 1 ? (
+                    <h1 className="ce-header">{block.data.text}</h1>
+                  ) : block.level === 2 ? (
+                    <h2 className="ce-header">{block.data.text}</h2>
+                  ) : block.data.level === 3 ? (
+                    <h3 className="ce-header">{block.data.text}</h3>
+                  ) : null
                ) : block.type === "textQuestion" ? (
-                  <SnoopElement
-                    type="text"
-                    name={block.id}
-                    label={block.data.label}
-                    classNames={{
-                      label: "mt-4 block text-base font-medium text-gray-800",
-                      element:
-                        "flex-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full min-w-0 rounded-md sm:text-base border-gray-300",
-                    }}
-                    required
-                  />
+                  <div className="pb-5">
+                    <SnoopElement
+                      type="text"
+                      name={block.id}
+                      label={block.data.label}
+                      classNames={{
+                        label:
+                          "mt-4 mb-2 block text-md font-bold leading-7 text-gray-800 sm:truncate",
+                        element:
+                          "flex-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full min-w-0 rounded-md sm:text-base border-gray-300",
+                      }}
+                      required
+                    />
+                  </div>
                ) : block.type === "submitButton" ? (
                  <SnoopElement
                    name="submit"
@@ -50,7 +61,7 @@ export default function App({ id = "", formId, draft = false }) {
                    label={block.data.label}
                    classNames={{
                      button:
-                        "flex justify-center px-4 py-2 mt-5 text-base font-medium text-white border border-transparent rounded-md shadow-sm bg-gray-700 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-700",
+                        "inline-flex items-center px-4 py-3 text-sm font-medium text-white bg-gray-700 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500",
                    }}
                  />
                ) : null}
--- a/package-lock.json
+++ b/package-lock.json
--- a/prisma/seed.js
+++ b/prisma/seed.js
@@ -1,100 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-exports.__esModule = true;
-var client_1 = require("@prisma/client");
-var bcryptjs_1 = require("bcryptjs");
-var prisma = new client_1.PrismaClient();
-function main() {
-    return __awaiter(this, void 0, void 0, function () {
-        var passwordHash, users, _i, users_1, user, userRes;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    console.log("Start seeding ...");
-                    if (!process.env.ADMIN_PASSWORD) return [3 /*break*/, 6];
-                    return [4 /*yield*/, (0, bcryptjs_1.hash)(process.env.ADMIN_PASSWORD, 12)];
-                case 1:
-                    passwordHash = _a.sent();
-                    if (!(typeof passwordHash === "string")) return [3 /*break*/, 6];
-                    users = [
-                        {
-                            name: "Admin",
-                            email: process.env.ADMIN_EMAIL,
-                            password: passwordHash
-                        },
-                    ];
-                    _i = 0, users_1 = users;
-                    _a.label = 2;
-                case 2:
-                    if (!(_i < users_1.length)) return [3 /*break*/, 5];
-                    user = users_1[_i];
-                    return [4 /*yield*/, prisma.user.upsert({
-                            where: {
-                                email: user.email
-                            },
-                            update: {},
-                            create: user
-                        })];
-                case 3:
-                    userRes = _a.sent();
-                    console.log("Created user with id: ".concat(userRes.id));
-                    _a.label = 4;
-                case 4:
-                    _i++;
-                    return [3 /*break*/, 2];
-                case 5:
-                    console.log("Seeding finished.");
-                    _a.label = 6;
-                case 6: return [2 /*return*/];
-            }
-        });
-    });
-}
-main()["catch"](function (e) {
-    console.error(e);
-    process.exit(1);
-})["finally"](function () { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0: return [4 /*yield*/, prisma.$disconnect()];
-            case 1:
-                _a.sent();
-                return [2 /*return*/];
-        }
-    });
-}); });
--- a/yarn.lock
+++ b/yarn.lock
@@ -55,12 +55,12 @@

 "@editorjs/header@^2.6.2":
  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/@editorjs/header/-/header-2.6.2.tgz#523b6dda72ff882e53f64325840ee7bfc68ee6b7"
+  resolved "https://registry.npmjs.org/@editorjs/header/-/header-2.6.2.tgz"
  integrity sha512-U1dnT+KGjwFmpWneEEyR2Nqp42hn9iKwQDgRHWQM+y6qx82pg+eAyuIf0QWt2Mluu9uPD2CzNfvJ+pxIuwX8Lw==

 "@editorjs/paragraph@^2.8.0":
  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@editorjs/paragraph/-/paragraph-2.8.0.tgz#11cc381fcafaf8b9160517ce65d59eee93fc4af9"
+  resolved "https://registry.npmjs.org/@editorjs/paragraph/-/paragraph-2.8.0.tgz"
  integrity sha512-z6w5ZR0ru3p/IjxJW/tb7OcSnVttkZukQMIsnBMX1FIKc1BNdr7NwM1YoCyTl4OnC90YfL0xgES6/20/W267pw==

 "@eslint/eslintrc@^1.2.3":
@@ -622,7 +622,7 @@ chokidar@^3.5.3:

 clsx@^1.1.1:
  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz"
  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==

 codex-notifier@^1.1.2:
@@ -2024,7 +2024,7 @@ react-loader-spinner@^5.1.5:

 react-toastify@^9.0.5:
  version "9.0.5"
-  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.0.5.tgz#310d7bcfcf3887c0e8461ac6068fe1abb8d720e1"
+  resolved "https://registry.npmjs.org/react-toastify/-/react-toastify-9.0.5.tgz"
  integrity sha512-dszPCeQINY+Nm6HmsiAXT/7wsazPqv0S/RuhIYLAW+fTKcd3T1iRjZG0XqrN9nvAzqaE5J6uxMaiBrOevxjY8g==
  dependencies:
    clsx "^1.1.1"