chore pkg and demo

packages/core/src/styles/fonts.ts

@@ -0,0 +1,47 @@
+import localFont from "next/font/local";
+import { Crimson_Text, Inconsolata, Inter } from "next/font/google";
+
+export const cal = localFont({
+  src: "./CalSans-SemiBold.otf",
+  variable: "--font-title",
+});
+
+export const crimsonBold = Crimson_Text({
+  weight: "700",
+  variable: "--font-title",
+  subsets: ["latin"],
+});
+
+export const inter = Inter({
+  variable: "--font-default",
+  subsets: ["latin"],
+});
+
+export const inconsolataBold = Inconsolata({
+  weight: "700",
+  variable: "--font-title",
+  subsets: ["latin"],
+});
+
+export const crimson = Crimson_Text({
+  weight: "400",
+  variable: "--font-default",
+  subsets: ["latin"],
+});
+
+export const inconsolata = Inconsolata({
+  variable: "--font-default",
+  subsets: ["latin"],
+});
+
+export const titleFontMapper = {
+  Default: cal.variable,
+  Serif: crimsonBold.variable,
+  Mono: inconsolataBold.variable,
+};
+
+export const defaultFontMapper = {
+  Default: inter.variable,
+  Serif: crimson.variable,
+  Mono: inconsolata.variable,
+};

packages/core/src/styles/index.css

@@ -0,0 +1,56 @@
+:root {
+  --inke-black: rgb(0 0 0);
+  --inke-white: rgb(255 255 255);
+  --inke-stone-50: rgb(250 250 249);
+  --inke-stone-100: rgb(245 245 244);
+  --inke-stone-200: rgb(231 229 228);
+  --inke-stone-300: rgb(214 211 209);
+  --inke-stone-400: rgb(168 162 158);
+  --inke-stone-500: rgb(120 113 108);
+  --inke-stone-600: rgb(87 83 78);
+  --inke-stone-700: rgb(68 64 60);
+  --inke-stone-800: rgb(41 37 36);
+  --inke-stone-900: rgb(28 25 23);
+
+  --inke-highlight-default: #ffffff;
+  --inke-highlight-purple: #f6f3f8;
+  --inke-highlight-red: #fdebeb;
+  --inke-highlight-yellow: #fbf4a2;
+  --inke-highlight-blue: #c1ecf9;
+  --inke-highlight-green: #acf79f;
+  --inke-highlight-orange: #faebdd;
+  --inke-highlight-pink: #faf1f5;
+  --inke-highlight-gray: #f1f1ef;
+
+  --font-title: "Cal Sans", sans-serif;
+}
+
+.dark-theme {
+  --inke-black: rgb(255 255 255);
+  --inke-white: rgb(25 25 25);
+  --inke-stone-50: rgb(35 35 34);
+  --inke-stone-100: rgb(41 37 36);
+  --inke-stone-200: rgb(66 69 71);
+  --inke-stone-300: rgb(112 118 123);
+  --inke-stone-400: rgb(160 167 173);
+  --inke-stone-500: rgb(193 199 204);
+  --inke-stone-600: rgb(212 217 221);
+  --inke-stone-700: rgb(229 232 235);
+  --inke-stone-800: rgb(232 234 235);
+  --inke-stone-900: rgb(240, 240, 241);
+
+  --inke-highlight-default: #000000;
+  --inke-highlight-purple: #3f2c4b;
+  --inke-highlight-red: #5c1a1a;
+  --inke-highlight-yellow: #5c4b1a;
+  --inke-highlight-blue: #1a3d5c;
+  --inke-highlight-green: #1a5c20;
+  --inke-highlight-orange: #5c3a1a;
+  --inke-highlight-pink: #5c1a3a;
+  --inke-highlight-gray: #3a3a3a;
+}
+
+@font-face {
+  font-family: "Cal Sans";
+  src: local("Cal Sans"), url(CalSans-SemiBold.otf) format("otf");
+}

packages/core/src/styles/prosemirror.css

@@ -0,0 +1,170 @@
+.ProseMirror {
+  @apply novel-p-12 novel-px-8 sm:novel-px-12;
+}
+
+.ProseMirror .is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--inke-stone-400);
+  pointer-events: none;
+  height: 0;
+}
+.ProseMirror .is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--inke-stone-400);
+  pointer-events: none;
+  height: 0;
+}
+
+/* Custom image styles */
+
+.ProseMirror img {
+  transition: filter 0.1s ease-in-out;
+
+  &:hover {
+    cursor: pointer;
+    filter: brightness(90%);
+  }
+
+  &.ProseMirror-selectednode {
+    outline: 3px solid #5abbf7;
+    filter: brightness(90%);
+  }
+}
+
+.img-placeholder {
+  position: relative;
+
+  &:before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: 3px solid var(--inke-stone-200);
+    border-top-color: var(--inke-stone-800);
+    animation: spinning 0.6s linear infinite;
+  }
+}
+
+@keyframes spinning {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */
+
+ul[data-type="taskList"] li > label {
+  margin-right: 0.2rem;
+  user-select: none;
+}
+
+@media screen and (max-width: 768px) {
+  ul[data-type="taskList"] li > label {
+    margin-right: 0.5rem;
+  }
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: var(--inke-white);
+  margin: 0;
+  cursor: pointer;
+  width: 1.2em;
+  height: 1.2em;
+  position: relative;
+  top: 5px;
+  border: 2px solid var(--inke-stone-900);
+  margin-right: 0.3rem;
+  display: grid;
+  place-content: center;
+
+  &:hover {
+    background-color: var(--inke-stone-50);
+  }
+
+  &:active {
+    background-color: var(--inke-stone-200);
+  }
+
+  &::before {
+    content: "";
+    width: 0.65em;
+    height: 0.65em;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em;
+    transform-origin: center;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  }
+
+  &:checked::before {
+    transform: scale(1);
+  }
+}
+
+ul[data-type="taskList"] li[data-checked="true"] > div > p {
+  color: var(--inke-stone-400);
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;
+}
+
+/* Overwrite tippy-box original max-width */
+
+.tippy-box {
+  max-width: 400px !important;
+}
+
+.ProseMirror:not(.dragging) .ProseMirror-selectednode {
+  outline: none !important;
+  border-radius: 0.2rem;
+  background-color: var(--inke-highlight-blue);
+  transition: background-color 0.2s;
+  box-shadow: none;
+}
+
+.drag-handle {
+  position: fixed;
+  opacity: 1;
+  transition: opacity ease-in 0.2s;
+  border-radius: 0.25rem;
+
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(0, 0, 0, 0.5)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
+  background-size: calc(0.5em + 0.375rem) calc(0.5em + 0.375rem);
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 1.2rem;
+  height: 1.5rem;
+  z-index: 50;
+  cursor: grab;
+
+  &:hover {
+    background-color: var(--inke-stone-100);
+    transition: background-color 0.2s;
+  }
+
+  &:active {
+    background-color: var(--inke-stone-200);
+    transition: background-color 0.2s;
+  }
+
+  &.hide {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  @media screen and (max-width: 600px) {
+    display: none;
+    pointer-events: none;
+  }
+}
+
+.dark-theme .drag-handle {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(255, 255, 255, 0.5)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
+}

packages/core/src/styles/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;