rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: use editable workaround for blocks

Browse source
This commit is contained in:
swve 2024-01-07 18:15:32 +01:00
parent a05b298c91
commit 21f1f2fd94
10 changed files with 36 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

1
apps/web/components/Contexts/Editor/EditorContext.tsx
View file

@ -1,3 +1,4 @@
'use client';
import React, { useState } from 'react'

8
apps/web/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx
View file

@ -1,13 +1,17 @@
import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
import { AlertCircle } from "lucide-react";
import React from "react";
import styled from "styled-components";
function InfoCalloutComponent(props: any) {
const editorState = useEditorProvider() as any;
const isEditable = editorState.isEditable;
return (
<NodeViewWrapper>
<InfoCalloutWrapper className="flex space-x-2 items-center bg-blue-200 rounded-lg text-blue-900 px-3 shadow-inner" contentEditable={props.extension.options.editable}>
<AlertCircle /> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
<InfoCalloutWrapper className="flex space-x-2 items-center bg-blue-200 rounded-lg text-blue-900 px-3 shadow-inner" contentEditable={isEditable}>
<AlertCircle /> <NodeViewContent contentEditable={isEditable} className="content" />
</InfoCalloutWrapper>
</NodeViewWrapper>
);

2
apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCallout.ts
View file

@ -8,8 +8,6 @@ export default Node.create({
group: "block",
draggable: true,
content: "text*",
marks: "",
defining: true,
// TODO : multi line support

8
apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx
View file

@ -1,13 +1,17 @@
import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
import { AlertTriangle } from "lucide-react";
import React from "react";
import styled from "styled-components";
function WarningCalloutComponent(props: any) {
const editorState = useEditorProvider() as any;
const isEditable = editorState.isEditable;
return (
<NodeViewWrapper>
<CalloutWrapper className="flex space-x-2 items-center bg-yellow-200 rounded-lg text-yellow-900 px-3 shadow-inner" contentEditable={props.extension.options.editable}>
<AlertTriangle /> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
<CalloutWrapper className="flex space-x-2 items-center bg-yellow-200 rounded-lg text-yellow-900 px-3 shadow-inner" contentEditable={isEditable}>
<AlertTriangle /> <NodeViewContent contentEditable={isEditable} className="content" />
</CalloutWrapper>
</NodeViewWrapper>
);

8
apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
View file

@ -8,10 +8,14 @@ import { UploadIcon } from "@radix-ui/react-icons";
import { getActivityBlockMediaDirectory } from "@services/media/media";
import { useOrg } from "@components/Contexts/OrgContext";
import { useCourse } from "@components/Contexts/CourseContext";
import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
function ImageBlockComponent(props: any) {
const org = useOrg() as any;
const course = useCourse() as any;
const editorState = useEditorProvider() as any;
const isEditable = editorState.isEditable;
const [image, setImage] = React.useState(null);
const [isLoading, setIsLoading] = React.useState(false);
const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject);
@ -39,8 +43,8 @@ function ImageBlockComponent(props: any) {
return (
<NodeViewWrapper className="block-image">
{!blockObject && props.extension.options.editable && (
<BlockImageWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={props.extension.options.editable}>
{!blockObject && isEditable && (
<BlockImageWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={isEditable}>
{isLoading ? (
<Loader className="animate-spin animate-pulse text-gray-200" size={50} />
) : (

4
apps/web/components/Objects/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx
View file

@ -5,11 +5,13 @@ import "katex/dist/katex.min.css";
import { InlineMath, BlockMath } from "react-katex";
import { Edit, Save } from "lucide-react";
import Link from "next/link";
import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
function MathEquationBlockComponent(props: any) {
const [equation, setEquation] = React.useState(props.node.attrs.math_equation);
const [isEditing, setIsEditing] = React.useState(true);
const isEditable = props.extension.options.editable;
const editorState = useEditorProvider() as any;
const isEditable = editorState.isEditable;
const handleEquationChange = (event: React.ChangeEvent<any>) => {
setEquation(event.target.value);

5
apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
View file

@ -8,6 +8,7 @@ import { UploadIcon } from "@radix-ui/react-icons";
import { getActivityBlockMediaDirectory } from "@services/media/media";
import { useOrg } from "@components/Contexts/OrgContext";
import { useCourse } from "@components/Contexts/CourseContext";
import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
function PDFBlockComponent(props: any) {
const org = useOrg() as any;
@ -16,6 +17,8 @@ function PDFBlockComponent(props: any) {
const [isLoading, setIsLoading] = React.useState(false);
const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject);
const fileId = blockObject ? `${blockObject.content.file_id}.${blockObject.content.file_format}` : null;
const editorState = useEditorProvider() as any;
const isEditable = editorState.isEditable;
const handlePDFChange = (event: React.ChangeEvent<any>) => {
setPDF(event.target.files[0]);
@ -39,7 +42,7 @@ function PDFBlockComponent(props: any) {
return (
<NodeViewWrapper className="block-pdf">
{!blockObject && (
<BlockPDFWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={props.extension.options.editable}>
<BlockPDFWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={isEditable}>
{isLoading ? (
<Loader className="animate-spin animate-pulse text-gray-200" size={50} />
) : (

4
apps/web/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx
View file

@ -4,6 +4,7 @@ import { twJoin, twMerge } from 'tailwind-merge'
import React from "react";
import { BadgeHelp, Check, Info, Minus, MoreVertical, Plus, RefreshCcw, X } from "lucide-react";
import ReactConfetti from "react-confetti";
import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
interface Answer {
answer_id: string;
@ -22,7 +23,8 @@ function QuizBlockComponent(props: any) {
const [userAnswers, setUserAnswers] = React.useState([]) as [any[], any];
const [submitted, setSubmitted] = React.useState(false) as [boolean, any];
const [submissionMessage, setSubmissionMessage] = React.useState("") as [string, any];
const isEditable = props.extension.options.editable;
const editorState = useEditorProvider() as any;
const isEditable = editorState.isEditable;
const handleAnswerClick = (question_id: string, answer_id: string) => {
// if the quiz is submitted, do nothing

5
apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
View file

@ -8,10 +8,13 @@ import { getActivityBlockMediaDirectory } from "@services/media/media";
import { UploadIcon } from "@radix-ui/react-icons";
import { useOrg } from "@components/Contexts/OrgContext";
import { useCourse } from "@components/Contexts/CourseContext";
import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
function VideoBlockComponents(props: any) {
const org = useOrg() as any;
const course = useCourse() as any;
const editorState = useEditorProvider() as any;
const isEditable = editorState.isEditable;
const [video, setVideo] = React.useState(null);
const [isLoading, setIsLoading] = React.useState(false);
const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject);
@ -39,7 +42,7 @@ function VideoBlockComponents(props: any) {
return (
<NodeViewWrapper className="block-video">
{!blockObject && (
<BlockVideoWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={props.extension.options.editable}>
<BlockVideoWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={isEditable}>
{isLoading ? (
<Loader className="animate-spin animate-pulse text-gray-200" size={50} />
) : (