misaki-studio-internal 0.1.0

package/src/utils/document.tsx

@@ -0,0 +1,556 @@
+import { useLayoutEffect, useRef } from "react";
+import styled from "styled-components";
+import { highlightElement } from "@speed-highlight/core";
+import React from "react";
+
+export const Body = styled.div`
+  position: relative;
+  display: block;
+  flex-direction: row;
+  user-select: none;
+`;
+
+export enum TextSize {
+  HEADLINE_1,
+  HEADLINE_2,
+  HEADLINE_3,
+  HEADLINE_4,
+  HEADLINE_5,
+  HEADLINE_6,
+  BODY_1,
+  BODY_2,
+}
+
+export enum TextStyle {
+  BOLD,
+  UNDERLINE,
+  LINE_THRONG,
+  ITALIC,
+}
+
+export const emptyBulletSvg = () => (
+  <svg
+    width="7"
+    height="7"
+    viewBox="0 0 7 7"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="0.5"
+      y="0.5"
+      width="6"
+      height="6"
+      rx="3"
+      fill="#000000"
+      stroke="black"
+    />
+  </svg>
+);
+
+export const solidBulletSvg = (
+  <svg
+    width="7"
+    height="7"
+    viewBox="0 0 7 7"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="0.5" y="0.5" width="6" height="6" rx="3" stroke="black" />
+  </svg>
+);
+
+export const Text = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: start;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  user-select: none;
+  white-space: pre-line;
+  &.text-${TextSize.HEADLINE_1} {
+    --font-size: 96px;
+    --line-height: 112px;
+  }
+  &.text-${TextSize.HEADLINE_2} {
+    --font-size: 60px;
+    --line-height: 70px;
+  }
+  &.text-${TextSize.HEADLINE_3} {
+    --font-size: 48px;
+    --line-height: 56px;
+  }
+  &.text-${TextSize.HEADLINE_4} {
+    --font-size: 34px;
+    --line-height: 40px;
+  }
+  &.text-${TextSize.HEADLINE_5} {
+    --font-size: 24px;
+    --line-height: 28px;
+  }
+  &.text-${TextSize.HEADLINE_6} {
+    --font-size: 20px;
+    --line-height: 23px;
+  }
+  &.text-${TextSize.BODY_1} {
+    --font-size: 14px;
+    --line-height: 24px;
+  }
+  &.text-${TextSize.BODY_2} {
+    --font-size: 12px;
+    --line-height: 20px;
+  }
+  font-size: var(--font-size);
+  > .bullet {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    max-height: var(--line-height);
+    user-select: none;
+  }
+  > .content {
+    display: inline-block;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    flex: 1;
+    font-weight: 400;
+    user-select: text;
+    min-height: var(--line-height);
+    line-height: var(--line-height);
+    > span:first-child:empty::before {
+      content: " ";
+    }
+    > span {
+      &.S${TextStyle.BOLD} {
+        font-weight: bold;
+      }
+      &.S${TextStyle.ITALIC} {
+        font-style: italic;
+      }
+      &.S${TextStyle.UNDERLINE} {
+        text-decoration: underline;
+      }
+      &.S${TextStyle.LINE_THRONG} {
+        text-decoration: line-through;
+      }
+      &.S${TextStyle.UNDERLINE}.S${TextStyle.LINE_THRONG} {
+        text-decoration: underline line-through;
+      }
+    }
+  }
+`;
+export const Image = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: start;
+  padding: 2px;
+  user-select: none;
+  white-space: pre-line;
+  width: 100%;
+  height: auto;
+  justify-content: center;
+  align-items: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-radius: 8px;
+  box-sizing: border-box;
+  &:hover {
+    background-color: transparent;
+  }
+  > div {
+    display: flex;
+    width: 100%;
+    padding: 4px;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+    background-color: #fcfcfc;
+    position: relative;
+    > .image {
+      width: 100%;
+      border-radius: 4px;
+      height: auto;
+    }
+    > .place-holder {
+      min-width: 150px;
+      min-height: 150px;
+      min-width: 100%;
+      border-radius: 4px;
+      padding: 10px;
+      box-sizing: border-box;
+      color: #999;
+    }
+  }
+  &.size-2 > div {
+    max-width: calc(100% / 2);
+  }
+  &.size-3 > div {
+    max-width: calc(100% / 3);
+  }
+  &.size-4 > div {
+    max-width: calc(100% / 4);
+  }
+  &.size-5 > div {
+    max-width: calc(100% / 5);
+  }
+  &.align-left {
+    justify-content: left;
+  }
+  &.align-right > div {
+    justify-content: right;
+  }
+`;
+
+export const Separator = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: start;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  user-select: none;
+  white-space: pre-line;
+  width: 100%;
+  height: 22px;
+  justify-content: center;
+  align-items: center;
+  > .line {
+    width: 100%;
+    background-color: #eee;
+    height: 2px;
+  }
+`;
+
+const CodeStyle = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: start;
+  padding: 2px;
+  user-select: none;
+  white-space: pre-line;
+  width: 100%;
+  height: auto;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  border-radius: 8px;
+  box-sizing: border-box;
+  &:hover {
+    background-color: transparent;
+  }
+  > div {
+    width: 100%;
+    padding: 4px;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+    background-color: #fcfcfc;
+    > .iframe {
+      min-height: 150px;
+      min-width: 100%;
+      max-width: 100%;
+      border-radius: 4px;
+      aspect-ratio: 1.7;
+      border: 0px;
+    }
+    > .place-holder {
+      min-width: 100%;
+      border-radius: 4px;
+      padding: 10px;
+      box-sizing: border-box;
+      color: #999;
+      margin: 0px !important;
+      box-shadow: none;
+      font-family: monospace;
+      font-size: 14px;
+      background: transparent;
+      user-select: text;
+    }
+  }
+`;
+
+export const Code = ({ code }: { code?: string }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (element) {
+      if (code) {
+        highlightElement(element, "js");
+      } else {
+        element.innerText = "Code is not set.";
+      }
+    }
+  }, [code]);
+
+  return (
+    <CodeStyle>
+      <div>
+        <link
+          rel="stylesheet"
+          href={`https://cdn.jsdelivr.net/gh/speed-highlight/core/dist/themes/github-light.css`}
+        />
+        <div
+          ref={ref}
+          className="place-holder header shj-lang-js shj-multiline fira"
+        >
+          {!!code && code}
+        </div>
+      </div>
+    </CodeStyle>
+  );
+};
+
+export const YoutubeVideo = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: start;
+  padding: 2px;
+  user-select: none;
+  white-space: pre-line;
+  width: 100%;
+  height: auto;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  border-radius: 8px;
+  box-sizing: border-box;
+  &:hover {
+    background-color: transparent;
+  }
+  > div {
+    background-color: #fff;
+    width: 100%;
+    padding: 4px;
+    border-radius: 8px;
+    border: 1px solid #000;
+    display: flex;
+    > .iframe {
+      min-height: 150px;
+      min-width: 100%;
+      max-width: 100%;
+      border-radius: 4px;
+      aspect-ratio: 1.7;
+      border: 0px;
+    }
+    > .place-holder {
+      min-width: 150px;
+      min-height: 150px;
+      min-width: 100%;
+      border-radius: 4px;
+      padding: 10px;
+      box-sizing: border-box;
+      color: #999;
+    }
+  }
+`;
+
+export const DocWrapper = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  transition: all 250ms;
+  width: 100%;
+  min-height: 100%;
+  > .tiptap {
+    position: relative;
+    display: flex;
+    transition: all 250ms;
+    flex: auto;
+    > div {
+      position: relative;
+      display: block;
+      transition: all 250ms;
+      flex: auto;
+      font-size: 14px;
+      color: #32302c;
+      caret-color: #000;
+      &:first-child > * {
+        padding-top: 8px;
+        padding-bottom: 8px;
+        margin: 0;
+      }
+      &:first-child > div {
+        display: flex;
+        flex-direction: row;
+        min-height: fit-content;
+      }
+
+      .youtube-wrapper {
+        border: 1px solid #ddd;
+        padding: 4px;
+        border-radius: 8px;
+        width: 100%;
+        height: auto;
+        display: flex;
+        &.empty {
+          padding: 10px;
+          font-size: 12px;
+          color: #999;
+        }
+        &.selected-node {
+          border: 1px solid #0094e8;
+        }
+        > iframe {
+          width: 100%;
+          aspect-ratio: 1.85/1;
+          border-radius: 4px;
+        }
+        &.selected-node {
+          border: 1px solid #333;
+        }
+        &.size-2 {
+          max-width: calc(100% / 2);
+        }
+        &.size-3 {
+          max-width: calc(100% / 3);
+        }
+        &.size-4 {
+          max-width: calc(100% / 4);
+        }
+        &.size-5 {
+          max-width: calc(100% / 5);
+        }
+      }
+
+      .image-wrapper {
+        border: 1px solid #ddd;
+        padding: 4px;
+        border-radius: 8px;
+        width: 100%;
+        height: auto;
+        display: flex;
+        &.empty {
+          padding: 10px;
+          font-size: 12px;
+          color: #999;
+        }
+        > img {
+          width: 100%;
+          border-radius: 4px;
+        }
+        &.selected-node {
+          border: 1px solid#0094E8;
+        }
+        &.size-2 {
+          max-width: calc(100% / 2);
+        }
+        &.size-3 {
+          max-width: calc(100% / 3);
+        }
+        &.size-4 {
+          max-width: calc(100% / 4);
+        }
+        &.size-5 {
+          max-width: calc(100% / 5);
+        }
+        &.align-left {
+          justify-content: left;
+        }
+        &.align-right > div {
+          justify-content: right;
+        }
+      }
+
+      h1,
+      h2,
+      h3,
+      h4 {
+        display: inline-block;
+        padding-top: 20px !important;
+        padding-bottom: 8px;
+        font-weight: normal;
+      }
+
+      h5,
+      h6 {
+        display: inline-block;
+        padding-top: 8px !important;
+        padding-bottom: 8px;
+        font-weight: normal;
+      }
+
+      p.is-editor-empty:first-child:before {
+        color: #999;
+        content: attr(data-placeholder);
+        float: left;
+        height: 0;
+        pointer-events: none;
+      }
+      p {
+        font-size: 15px;
+        line-height: 24px;
+        padding-top: 2px;
+        padding-bottom: 2px;
+        margin: 0;
+      }
+      h1 {
+        font-size: 96px;
+      }
+      h2 {
+        font-size: 60px;
+      }
+      h3 {
+        font-size: 48px;
+      }
+      h4 {
+        font-size: 34px;
+      }
+      h5 {
+        font-size: 24px;
+      }
+      h6 {
+        font-size: 24px;
+      }
+      a {
+        font-weight: 500;
+        text-decoration: underline;
+        cursor: pointer;
+      }
+      ul {
+        padding-left: 16px;
+      }
+      ul {
+        list-style-type: disc;
+        ul {
+          list-style-type: circle;
+          ul {
+            list-style-type: square;
+          }
+        }
+      }
+    }
+    > div > .drag {
+      padding-right: 20px;
+      > .menu {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        flex-direction: row;
+        background: #fff;
+        border: 1px solid #f0f0f0;
+        box-shadow: rgba(0, 0, 0, 0.07) 0px 5px 30px 0px;
+        padding: 8px;
+        border-radius: 16px;
+        gap: 6px;
+      }
+    }
+  }
+  .drag-handle {
+    width: 20px;
+    height: 20px;
+  }
+  .prosemirror-dropcursor-block {
+    background-color: #ddd !important;
+    height: 2px !important;
+    border-radius: 2px;
+  }
+`;

package/src/utils/operations.ts

@@ -0,0 +1,41 @@
+const canPush = <T, V extends T>(array: T[], value: V) => {};
+
+const canRemove = canPush;
+
+const canRemoveAll = canPush;
+
+const canPushAt = <T, V extends T>(
+  array: T[],
+  value: V,
+  index: NonNullable<number>,
+) => {};
+
+const canRemoveAt = <T,>(array: T[], index: NonNullable<number>) => {};
+
+const canMath = (left: NonNullable<number>, right: NonNullable<number>) => {
+  left = right;
+};
+
+type ArgumentTypes<F extends Function> = F extends (...args: infer A) => any
+  ? A
+  : never;
+
+const canCall = <CALL extends Function>(
+  fn?: CALL,
+  ...args: ArgumentTypes<CALL>
+) => {};
+
+const isType = <T,>(value: T) => value;
+const isArrayType = <T,>(value: T[]) => value;
+
+export default {
+  canPush,
+  canRemove,
+  canRemoveAll,
+  canPushAt,
+  canRemoveAt,
+  canMath,
+  canCall,
+  isType,
+  isArrayType,
+};

package/src/utils/popup.module.scss

@@ -0,0 +1,45 @@
+.background {
+  position: absolute;
+  background-color: white;
+  border: 1px solid #999;
+  width: auto;
+  height: auto;
+  min-width: min(calc(100% - 120px), 600px);
+  min-height: min(calc(100% - 120px), 400px);
+  top: var(--top-value, 50%);
+  left: var(--left-value, 50%);
+  border-radius: 14px;
+  box-shadow: 0px 5px 25px rgb(0 0 0 / 7%);
+  transition-delay: 150ms;
+  transition: all 300ms;
+  transform: var(
+    --transform-value,
+    translateX(-50%) translateY(-50%) scale(0.9)
+  );
+  opacity: var(--opacity-value, 0);
+}
+
+.popup-element {
+  position: absolute;
+  background-color: white;
+  border: 1px solid #ddd;
+  width: auto;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0px 5px 25px rgb(0 0 0 / 7%);
+  opacity: 0;
+  padding: 8px;
+  z-index: 100000;
+  box-sizing: border-box;
+  &:empty {
+    opacity: 0;
+  }
+}
+
+.root {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transition: background-color 150ms;
+  background-color: var(--background-color, rgba(0, 0, 0, 0.4));
+}