e.stopPropagation()}
42 | className="mk-cell-text"
43 | ref={ref}
44 | data-ph={props.compactMode ? props.property.name : "Empty"}
45 | onKeyDown={onKeyDown}
46 | onBlur={onBlur}
47 | contentEditable={true}
48 | dangerouslySetInnerHTML={{ __html: initialValue }}
49 | />
50 | ) : (
51 |
{initialValue}
52 | );
53 | };
54 |
--------------------------------------------------------------------------------
/src/core/react/components/SpaceView/Contexts/FilterBar/CustomVIewOption.tsx:
--------------------------------------------------------------------------------
1 | import { Sticker } from "core/react/components/UI/Stickers/Sticker";
2 | import { UIManager } from "makemd-core";
3 | import React from "react";
4 | export const CustomViewOption = (props: {
5 | ui: UIManager;
6 | type: string;
7 | icon: string;
8 | selected: boolean;
9 | onSelect: () => void;
10 | onCustomize?: () => void;
11 | hide: () => void;
12 | }) => {
13 | return (
14 |
{
17 | props.onSelect();
18 | props.hide();
19 | }}
20 | >
21 |
22 |
23 | {props.type}
24 |
25 | {props.selected && (
26 |
31 | )}
32 | {props.onCustomize &&
}
44 |
45 | );
46 | };
47 |
--------------------------------------------------------------------------------
/src/core/react/components/SpaceView/Contexts/FilterBar/SearchBar.tsx:
--------------------------------------------------------------------------------
1 | import { Superstate } from "makemd-core";
2 | import React, { useEffect } from "react";
3 | import i18n from "shared/i18n";
4 |
5 | export const SearchBar = (props: {
6 | superstate: Superstate;
7 | setSearchString: (str: string) => void;
8 | closeSearch?: () => void;
9 | }) => {
10 | const [searchActive, setSearchActive] = React.useState(false);
11 | const clearSearch = () => {
12 | setSearchActive(false);
13 | props.setSearchString("");
14 | };
15 | const ref = React.useRef
(null);
16 | useEffect(() => {
17 | if (searchActive) {
18 | ref.current?.focus();
19 | }
20 | }, [searchActive]);
21 | return (
22 |
23 |
29 | <>
30 | props.setSearchString(e.target.value)}
32 | placeholder={i18n.labels.searchPlaceholder}
33 | className="mk-search-bar"
34 | ref={ref}
35 | >
36 | {props.closeSearch && (
37 |
48 | )}
49 |
50 |
51 | );
52 | };
53 |
--------------------------------------------------------------------------------
/src/core/react/components/SpaceView/Frames/EditorNodes/AudioNodeView.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from "react";
2 | import { FrameNodeViewProps } from "../ViewNodes/FrameView";
3 |
4 | export const AudioNodeView = (props: FrameNodeViewProps) => {
5 | const value = props.state.props.value;
6 | const sourcePath = useMemo(() => {
7 | return props.superstate.ui.getUIPath(value);
8 | }, [value]);
9 |
10 | return props.state?.props.value?.length > 0 ? (
11 |
12 | ) : (
13 | <>
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/src/core/react/components/SpaceView/Frames/EditorNodes/ContentNodeView.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const ContentNodeView = (props: {
4 | children?: React.ReactNode;
5 | editable?: boolean;
6 | }) => {
7 | return <>{props.children};
8 | };
9 |
--------------------------------------------------------------------------------
/src/core/react/components/SpaceView/Frames/EditorNodes/NewNodeView.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { FrameNodeViewProps } from "../ViewNodes/FrameView";
3 | export const NewNodeView = (props: FrameNodeViewProps) => {
4 | return ;
5 | };
6 |
--------------------------------------------------------------------------------
/src/core/react/components/SpaceView/Frames/FrameNodeEditor/Overlays/FrameFillOverlay.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { FrameNodeState } from "shared/types/frameExec";
3 | import { FrameTreeProp } from "shared/types/mframe";
4 |
5 | export const FrameFill = (props: {
6 | state: FrameNodeState;
7 | clientSize: FrameTreeProp;
8 | saveStyles: (styles: FrameTreeProp) => void;
9 | }) => {
10 | return (
11 | {}}
23 | >
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/src/core/react/components/SpaceView/Frames/FrameNodeEditor/Submenus/AlignmentSubmenu.tsx:
--------------------------------------------------------------------------------
1 | import { wrapQuotes } from "core/utils/strings";
2 | import React, { useState } from "react";
3 | import { HoverSubmenuProps } from "./HoverSubmenuProps";
4 |
5 | export const AlignmentEditor = (props: HoverSubmenuProps) => {
6 | const directions = ["nw", "n", "ne", "w", "m", "e", "sw", "s", "se"];
7 | const [layoutAlign, setLayoutAlign] = useState(
8 | props.state?.styles?.layoutAlign
9 | );
10 | return (
11 |
12 | {directions.map((d) => (
13 |
{
19 | setLayoutAlign(d);
20 | props.saveStyleValue("layoutAlign", wrapQuotes(d));
21 | }}
22 | >
23 | ))}
24 |
{
30 | showColorMenu(e, "--text-normal");
31 | }}
32 | >
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/src/core/react/components/SpaceView/Frames/Setters/SliderSetter.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 |
3 | export const Slider = (props: {
4 | value: string;
5 | setValue: (value: string) => void;
6 | }) => {
7 | const [value, setValue] = useState(props.value);
8 | return (
9 | setValue(e.target.value)}
16 | onMouseUp={(e) => props.setValue(value)}
17 | />
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/src/core/react/components/SpaceView/Frames/Setters/ToggleSetter.tsx:
--------------------------------------------------------------------------------
1 | import { Superstate } from "makemd-core";
2 | import React from "react";
3 |
4 | export const ToggleSetter = (props: {
5 | superstate: Superstate;
6 | name: string;
7 | setValue: (value: string) => void;
8 | defaultValue: string;
9 | onValue: string;
10 | value: string;
11 | icon: string;
12 | }) => {
13 | return (
14 |
20 | props.value == props.onValue
21 | ? props.setValue(props.defaultValue)
22 | : props.setValue(props.onValue)
23 | }
24 | dangerouslySetInnerHTML={{
25 | __html: props.superstate.ui.getSticker(props.icon),
26 | }}
27 | >
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/src/core/react/components/SpaceView/Frames/ViewNodes/FrameInstance.tsx:
--------------------------------------------------------------------------------
1 | import { FrameInstanceContext } from "core/react/context/FrameInstanceContext";
2 | import { Superstate } from "makemd-core";
3 | import React, { useContext } from "react";
4 | import { FrameView } from "./FrameView";
5 |
6 | export const FrameInstanceView = (props: {
7 | superstate: Superstate;
8 | source?: string;
9 | children?: React.ReactNode;
10 | }) => {
11 | const { saveState, instance } = useContext(FrameInstanceContext);
12 | return (
13 | instance.exec && (
14 |
21 | {props.children}
22 |
23 | )
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/src/core/react/components/SpaceView/SpaceInner.tsx:
--------------------------------------------------------------------------------
1 | import { SpaceHeader } from "core/react/components/SpaceView/SpaceHeader";
2 | import SpaceOuter from "core/react/components/SpaceView/SpaceOuter";
3 | import { SpaceContext } from "core/react/context/SpaceContext";
4 | import { Backlinks, Superstate } from "makemd-core";
5 | import React, { useContext, useRef } from "react";
6 |
7 | export const SpaceInner = (props: {
8 | superstate: Superstate;
9 | header: boolean;
10 | }) => {
11 | const ref = useRef(null);
12 | const { spaceState } = useContext(SpaceContext);
13 | return (
14 | <>
15 | {props.header && (
16 |
17 | )}
18 | {spaceState && (
19 |
24 | )}
25 | {props.superstate.settings.inlineBacklinks && spaceState && (
26 |
27 |
31 |
32 | )}
33 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/src/core/react/components/System/IconsSet.tsx:
--------------------------------------------------------------------------------
1 | import { Superstate } from "makemd-core";
2 | import React, { useEffect } from "react";
3 | import { uiIconSet } from "shared/assets/icons";
4 | type IconSet = {
5 | name: string;
6 | icon: string;
7 | iconSet: string;
8 | };
9 | export const IconSet = (props: { superstate: Superstate }) => {
10 | const [iconSets, setIconSets] = React.useState([]);
11 | const [icons, setIcons] = React.useState([]);
12 | useEffect(() => {
13 | Object.keys(uiIconSet)
14 | .filter((f, i) => i < 10)
15 | .forEach((icon) => {
16 | setIcons((f) => [...f, "ui//" + icon]);
17 | });
18 | }, []);
19 |
20 | return (
21 |
22 |
23 | {icons.map((c, i) => (
24 |
31 | ))}
32 |
33 |
8 |
9 | {colors.map((c, i) => (
10 |
{}}
14 | className="mk-color"
15 | style={{ background: c[1] }}
16 | >
17 | ))}
18 |
Add
19 |
20 |
21 | {colorsBase.map((c, i) => (
22 |
{}}
26 | className="mk-color"
27 | style={{ background: c[1] }}
28 | >
29 | ))}
30 |
31 |
25 | {selectedCommand && (
26 |
27 |
36 |
37 | )}
38 |
7 |
Templates
8 |
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/src/core/react/components/UI/Crumbs/ContextViewCrumb.tsx:
--------------------------------------------------------------------------------
1 | import { defaultString } from "core/utils/strings";
2 | import { Superstate } from "makemd-core";
3 | import React from "react";
4 |
5 | import { FrameSchema } from "shared/types/mframe";
6 |
7 | export const ContextViewCrumb = (
8 | props: React.PropsWithChildren<{
9 | superstate: Superstate;
10 | schema: FrameSchema;
11 | active: boolean;
12 | onSelect: (e: React.MouseEvent) => void;
13 | onContextMenu?: (e: React.MouseEvent, schema: FrameSchema) => void;
14 | }>
15 | ) => {
16 | return (
17 | props.onSelect(e)}
19 | onContextMenu={(e) => props.onContextMenu(e, props.schema)}
20 | className={`mk-context ${props.active ? "mk-active" : ""}`}
21 | >
22 | {defaultString(props.schema.name, "Untitled")}
23 | {props.children}
24 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/src/core/react/components/UI/Cues/EmptyState.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | export const EmptyState = (props: {
3 | enabled: boolean;
4 | message: string;
5 | image: string;
6 | }) => {
7 | return ;
8 | };
9 |
--------------------------------------------------------------------------------
/src/core/react/components/UI/Dropdown.tsx:
--------------------------------------------------------------------------------
1 | import { SelectOption, Superstate } from "makemd-core";
2 | import React from "react";
3 | import { windowFromDocument } from "shared/utils/dom";
4 | export const Dropdown = (props: {
5 | superstate: Superstate;
6 | options?: SelectOption[];
7 | triggerMenu?: (e: React.MouseEvent) => void;
8 | value: string;
9 | selectValue?: (value: string) => void;
10 | }) => {
11 | const openMenu = (e: React.MouseEvent) => {
12 | const offset = (e.target as HTMLElement).getBoundingClientRect();
13 | props.superstate.ui.openMenu(
14 | offset,
15 | {
16 | ui: props.superstate.ui,
17 | editable: false,
18 | value: [props.value],
19 | options: props.options,
20 | saveOptions: (options: string[], value: string[]) => {
21 | props.selectValue(value[0]);
22 | },
23 | searchable: false,
24 | },
25 | windowFromDocument(e.view.document)
26 | );
27 | };
28 | return (
29 | (props.triggerMenu ? props.triggerMenu(e) : openMenu(e))}
32 | >
33 |
34 | {props.options
35 | ? props.options.find((f) => f.value == props.value)?.name
36 | : props.value}
37 |
38 |
44 |
31 |
{message}
32 |
33 |
36 |
39 |
40 |
42 |
setValue(e.target.value)}
47 | className="mk-input mk-input-large"
48 | style={{
49 | width: "100%",
50 | }}
51 | onKeyDown={(e) => {
52 | if (e.key === "Enter") save();
53 | }}
54 | >
55 |
56 |
57 |
60 |
61 |