15 | {
118 | let data = {};
119 | if (fileType === 'md') {
120 | data = { text: v, subtype: 'md' };
121 | } else if (fileType === 'html') {
122 | data = { text: v, subtype: 'html' };
123 | } else if (fileType === 'js') {
124 | data = { js: v, subtype: 'html' };
125 | }
126 | console.log(data);
127 | onLocalUpdate(data);
128 | }}
129 | />
130 |
131 |
132 | );
133 | }
134 |
135 | return (
136 | <>
137 |
152 |
153 |
154 |
23 |
101 |
102 |
103 |
104 |
24 | {fileType !== 'md' && (
25 | <>
26 |
35 |
36 |
37 |
38 |
47 |
48 | )}
49 | {fileType === 'md' && (
50 |
59 | )}
60 |
61 |
62 |
100 |
63 |
86 |
87 |
88 | {
94 | setModal(null);
95 | }}
96 | >
97 |
98 |
99 | {
157 | onLocalUpdate({ maxWidth: !elemData.maxWidth });
158 | }}
159 | >
160 |
161 |
162 |
163 | );
164 | }
165 |
--------------------------------------------------------------------------------
/src/Components/DraggableHtml/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useContext } from 'react';
2 | import EditItem from '../DDEditor/EditItem';
3 |
4 | import SiteContext from '../../pageContext';
5 | import ReactMarkdown from 'react-markdown';
6 | import rehypeRaw from 'rehype-raw';
7 |
8 | import PanelControls from './PanelControls';
9 |
10 | const defaultTextSize = 24;
11 |
12 | function DraggableHtml(props) {
13 | const { elemData, selected } = props;
14 |
15 | const siteData = useContext(SiteContext);
16 | const {
17 | setSelected: onSelect,
18 | onUpdateDiv: onUpdated,
19 | mode,
20 | setModal,
21 | } = siteData;
22 |
23 | function onLocalUpdate(newProps) {
24 | var updatedProps = {
25 | ...newProps,
26 | };
27 | siteData.onUpdateDiv(elemData.id, updatedProps);
28 | }
29 |
30 | return (
31 | <>
32 |
45 |
}
51 | {
83 | loadImageToUri();
84 | }}
85 | >
86 | 
94 |
95 |
96 |
94 | {
100 | onLocalUpdate({ maxWidth: !elemData.maxWidth });
101 | }}
102 | >
103 |
104 |
105 |
106 | );
107 | }
108 |
109 | return (
110 | <>
111 | {
31 | if(!colorPickerActive){
32 | setPanelControls(
33 | <>
34 |
*/}
65 |
66 |
35 | {
41 | console.log("color", color);
42 | onLocalUpdate({ style: {...elemData.style, color: color} });
43 | }}
44 | onClose={() => {
45 | // setPanelControls(null);
46 | }}
47 | />
48 |
49 | ,
50 | );
51 | setColorPickerActive(true);
52 | } else {
53 | setColorPickerActive(false);
54 | }
55 | }}
56 | style={{
57 | borderRadius: 100,
58 | width: 25,
59 | height: 25,
60 | backgroundColor: elemData.style && elemData.style.color,
61 | border: '2px solid black',
62 | cursor: 'pointer',
63 | }}
64 | >
86 | {
89 | elemData.style && elemData.style.fontWeight === 'bold'?
90 | onLocalUpdate({style: {fontWeight: 'normal'}}):
91 | onLocalUpdate({style: {fontWeight: 'bold'}});
92 |
93 | }}
94 | />
95 |
96 |
97 |
98 |
99 | {
102 | elemData.style && elemData.style.fontStyle === 'italic'?
103 | onLocalUpdate({style: {fontStyle: 'normal'}}):
104 | onLocalUpdate({style: {fontStyle: 'italic'}});
105 |
106 | }}
107 | />
108 |
109 |
110 |
111 |
112 | {
115 | onLocalUpdate({
116 | style: {
117 | textAlign:
118 | alignDirections[
119 | (currentDirection + 1) %
120 | alignDirections.length
121 | ],
122 | },
123 | });
124 | }}
125 | />
126 |
127 |
128 | );
129 | }
130 |
--------------------------------------------------------------------------------
/src/Components/DraggableText/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useContext, useEffect } from 'react';
2 | import EditItem from '../DDEditor/EditItem';
3 | import SiteContext from '../../pageContext';
4 | import PanelControls from './PanelControls'
5 |
6 | const defaultTextSize = 24;
7 |
8 | const fontList = ['Arial', 'Times New Roman', 'Courier New'];
9 |
10 | function DraggableText(props) {
11 | const { elemData, mode, selected } = props;
12 | const siteData = useContext(SiteContext);
13 |
14 | const fontSource = !fontList.includes(elemData.style &&elemData.style.fontFamily)
15 | ? 'google'
16 | : '';
17 |
18 | function onLocalUpdate(newProps) {
19 | var updatedProps = {
20 | ...newProps,
21 | };
22 | console.log(updatedProps)
23 | siteData.onUpdateDiv(elemData.id, updatedProps);
24 | }
25 |
26 | return (
27 | <>
28 | {
105 | !contentEditable && setDragMove(true);
106 | }}
107 | onTouchMove={()=> {
108 | setDragMove(true);
109 | }}
110 | onTouchEndCapture={()=>{
111 | contentEditable && !dragMove && setMobileEditing(true);
112 | setDragMove(false);
113 | }}
114 | onFocus={() => {
115 | setCursor('pointer');
116 | }}
117 | // onBlur={() => {
118 | // setCursor(undefined);
119 | // }}
120 | style={{ cursor: cursor, ...style }}
121 | >
122 | {text}
123 |
}
124 | {mobileEditing &&
125 |
131 |
}
132 |
133 | );
134 | }
135 |
--------------------------------------------------------------------------------
/src/DragDrop.js:
--------------------------------------------------------------------------------
1 | import React, {useState, useEffect, useCallback} from 'react';
2 | import GenericModal from './utils/ui/GenericModal';
3 | import { Column, debounce, getMobileScaleRatio, guidGenerator, mergeDeep } from './utils/helpers';
4 | import SiteContext from './pageContext';
5 | import MobileBoundary from './utils/ui/MobileBoundary';
6 | import Menu from './EditMenu/EditMenu';
7 | import ComponentSelector from './Components/ComponentSelector';
8 |
9 | export var EditorModes = {
10 | EDIT: 'edit',
11 | VIEW: 'view',
12 | }
13 |
14 | function DragDrop({
15 | immutable= false,
16 | saveCallback,
17 | onChangedCallback,
18 | initialState,
19 | pending,
20 | }) {
21 | const [items, setItems] = useState(initialState || {});
22 | const [selected, setSelected] = useState([]);
23 | const [mode, setMode] = useState(EditorModes.VIEW);
24 | const [modal, setModal] = useState(null);
25 |
26 | const [pastItems, setPastItems] = useState([initialState || {}]);
27 | const [undoCount, setUndoCount] = useState(0);
28 |
29 | const [pageHeight, setPageHeight] = useState(0);
30 | const [pageWidth, setPageWidth] = useState(0);
31 |
32 | function deleteItemFromList(key) {
33 | var newItems = items;
34 | newItems[key] && delete newItems[key];
35 | setItems(newItems);
36 | debounceElemdataHistoryUpdate(pastItems, newItems, undoCount);
37 | setSelected([]);
38 | }
39 |
40 | function onUpdateDiv(divId, newProps) {
41 | var oldItems = items[divId] || {};
42 | const updatedItems = {
43 | ...items,
44 | [divId]: {...mergeDeep(oldItems, newProps)},
45 | };
46 | debounceElemdataHistoryUpdate(pastItems, updatedItems, undoCount);
47 | setItems(updatedItems);
48 | }
49 |
50 | function undo(e) {
51 | setItems(pastItems[pastItems.length - 1 - (undoCount + 1)]);
52 | setUndoCount(undoCount + 1);
53 |
54 | e.stopPropagation();
55 | }
56 |
57 | function redo(e) {
58 | setItems(pastItems[pastItems.length - 1 - (undoCount - 1)]);
59 | setUndoCount(undoCount - 1);
60 |
61 | e.stopPropagation();
62 | }
63 |
64 | function onSaveClicked() {
65 | if (!immutable) {
66 | setMode(EditorModes.VIEW);
67 | saveCallback && saveCallback(items);
68 | }
69 | }
70 |
71 | function onEditClicked() {
72 | setMode(EditorModes.EDIT);
73 | }
74 |
75 | function addItemToList(data, id) {
76 | var newItem = {
77 | id: id || guidGenerator(),
78 | pos: { x: 200, y: 200 },
79 | rot: { deg: 0 },
80 | zIndex: 10000 + Object.keys(items).length,
81 | type: 'text',
82 | ...data,
83 | };
84 | const updatedItems = { ...items, [newItem.id]: newItem };
85 | setItems(updatedItems);
86 | debounceElemdataHistoryUpdate(pastItems, updatedItems, undoCount);
87 | setSelected([newItem.id]);
88 | }
89 |
90 | const debounceElemdataHistoryUpdate = useCallback(
91 | debounce((oldItemsList, newItem, undoCount) => {
92 | if (undoCount > 0) {
93 | setPastItems([...oldItemsList.slice(0, -undoCount), newItem]);
94 | setUndoCount(0);
95 | } else {
96 | setPastItems([...oldItemsList, newItem]);
97 | }
98 | onChangedCallback && onChangedCallback(newItem);
99 | }, 1000),
100 | [],
101 | );
102 |
103 |
104 | const providerValues = {
105 | items: items,
106 | selected: selected,
107 | setSelected: (item) => {
108 | setSelected([item]);
109 | // setSelected([...selected, item])
110 | },
111 | deleteItemFromList: deleteItemFromList,
112 | addItemToList: addItemToList,
113 | onUpdateDiv: onUpdateDiv,
114 | mode: mode,
115 | setModal: setModal,
116 | };
117 |
118 | return (
119 | <>
120 |
121 | {
131 | console.log('bg got clicked now');
132 | setSelected(['bg']);
133 | console.log(e);
134 | }}
135 | >
136 |
168 |
169 | {modal && <>
170 |
137 |
167 |
147 | {Object.keys(items).map((key) => {
148 | var elem = items[key];
149 | if (
150 | elem.pos.y + elem.size.height / 2 >
151 | pageHeight
152 | ) {
153 | setPageHeight(
154 | elem.pos.y + elem.size.height / 2,
155 | );
156 | }
157 | return (
158 |
166 |
34 |
142 |
143 | );
144 | }
145 |
146 | function UriInputModal(props) {
147 | console.log(props);
148 | const [value, setValue] = useState(props.prefill || 'https://');
149 | return (
150 |
40 | {secondaryPanel && (
41 |
141 | {e.stopPropagation();}}
43 | className={'cpanel cpanel-shadow'}
44 | style={{
45 | padding: 10,
46 | marginBottom: 5,
47 | width: 'fit-content',
48 | position: 'relative',
49 | }}
50 | >
51 | {secondaryPanel}
52 |
53 | )}
54 |
61 |
140 |
62 | {CustomPanel && (
63 |
139 | {
83 | setModal(
84 | {
87 | saveElemJson({ href: data });
88 | setModal(null);
89 | }}
90 | />,
91 | );
92 | }}
93 | >
94 |
95 |
96 | {
99 | saveElemJson({
100 | zIndex: elemData.zIndex + 1000,
101 | });
102 | }}
103 | >
104 |
105 |
106 | {
109 | saveElemJson({
110 | zIndex: elemData.zIndex - 1000,
111 | });
112 | }}
113 | >
114 |
115 |
116 | {
119 | addItemToList({...elemData,
120 | pos: {x: elemData.pos.x + 10, y: elemData.pos.y + 10},
121 | id: new guidGenerator()
122 | });
123 | }}
124 | >
125 |
126 |
127 | {
130 | deleteItemFromList(elemData.id);
131 | }}
132 | >
133 |
137 |
138 |
151 | {
157 | setValue(e.target.value);
158 | }}
159 | >
160 |
168 |
169 |
170 | );
171 | }
172 |
173 | export default DefaultControlPanel;
174 |
--------------------------------------------------------------------------------
/src/EditMenu/EditMenu.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from 'react';
2 | import { Column, Row } from '../utils/helpers';
3 | import defaultButtons from './defaultButtons';
4 | import { v4 as uuidv4 } from 'uuid';
5 | import { GiphySelector } from '../Components/DraggableGiphy/GiphySelector';
6 | // import { HeadConfigurator } from '../NextHead';
7 | import { ButtonSelector } from '../Components/DraggableButton/ButtonSelector';
8 | import SiteContext from '../pageContext';
9 | // import { TemplateSelector } from '../DraggableTemplate';
10 |
11 | export function AddButton({ item, showMenu, setSelector }) {
12 | const siteData = useContext(SiteContext);
13 |
14 | const SELECTORS = {
15 | giphy: {
38 | switch (item[1].action) {
39 | case 'add':
40 | siteData.addItemToList(item[1].object);
41 | showMenu(null);
42 | break;
43 | case 'menu':
44 | showMenu(item[1].objects);
45 | break;
46 | case 'selector':
47 | setSelector(SELECTORS[item[1].selector]);
48 | break;
49 | case 'modal':
50 | siteData.setModal(FUNCS[item[1].selector]);
51 | break;
52 | }
53 | e.stopPropagation();
54 | }}
55 | >
56 | {item[1].label && (
57 | {item[1].label}
58 | )}
59 |
60 |
61 |
62 | );
63 | }
64 |
65 | function Menu({ addItemToList, selected }) {
66 | const siteData = useContext(SiteContext);
67 |
68 | return (
69 | {
72 | e.stopPropagation();
73 | }}
74 | >
75 |
76 |
82 |
83 | );
84 | }
85 |
86 | function NestedMenu({ data, addItemToList, parentSelected }) {
87 | const [selected, setSelected] = useState(null);
88 | const [selector, setSelector] = useState(null);
89 |
90 | useEffect(() => {
91 | setSelected(null);
92 | setSelector(null);
93 | }, [parentSelected]);
94 |
95 | useEffect(() => {
96 | setSelector(null);
97 | }, [selected]);
98 |
99 | return (
100 | <>
101 | {selector &&
108 | {props.children}
109 |
110 | );
111 | };
112 |
113 | export const Row = (props) => {
114 | return (
115 |
119 | {props.children}
120 |
121 | );
122 | };
123 |
124 | export function debounce(func, wait) {
125 | var timeout;
126 |
127 | return (...args) => {
128 | var context = this;
129 |
130 | var later = () => {
131 | func.apply(context, args);
132 | };
133 |
134 | clearTimeout(timeout);
135 |
136 | timeout = setTimeout(later, wait);
137 | };
138 | };
139 |
140 | /**
141 | * Simple object check.
142 | * @param item
143 | * @returns {boolean}
144 | */
145 | export function isObject(item) {
146 | return (item && typeof item === 'object' && !Array.isArray(item));
147 | }
148 |
149 | export function mergeDeep(target, source) {
150 | let output = Object.assign({}, target);
151 | if (isObject(target) && isObject(source)) {
152 | Object.keys(source).forEach(key => {
153 | if (isObject(source[key])) {
154 | if (!(key in target))
155 | Object.assign(output, { [key]: source[key] });
156 | else
157 | output[key] = mergeDeep(target[key], source[key]);
158 | } else {
159 | Object.assign(output, { [key]: source[key] });
160 | }
161 | });
162 | }
163 | return output;
164 | }
165 |
166 | export function isDarkColor(bgColor) {
167 | if(typeof bgColor === 'undefined') return false;
168 | var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
169 | var r = parseInt(color.substring(0, 2), 16); // hexToR
170 | var g = parseInt(color.substring(2, 4), 16); // hexToG
171 | var b = parseInt(color.substring(4, 6), 16); // hexToB
172 | return (((r * 0.299) + (g * 0.587) + (b * 0.114)) > 186) ?
173 | false : true;
174 | }
--------------------------------------------------------------------------------
/src/utils/ui/ColorPicker.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { RgbaStringColorPicker } from "react-colorful";
3 |
4 | export default function ColorPicker ({color, onChange, onClose}) {
5 | return <>
6 | {
7 | onClose();
8 | }}>
9 |
14 |
15 | }
--------------------------------------------------------------------------------
/src/utils/ui/DropDownMenu.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState } from 'react';
2 |
3 | export default function DropDownMenu({ options, selectedOption, onSelect, type }) {
4 | const [selected, setSelected] = useState(false);
5 | const [scrollLimit, setScrollLimit] = useState(20);
6 | const listInnerRef = useRef();
7 |
8 | return (
9 |
10 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/src/utils/ui/GenericModal.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | function GenericModal(props) {
4 | return (
5 |
11 |
29 | {selected && (
30 |
67 | )}
68 |
69 |
6 |
props.onDone()} />
7 |
13 | );
14 | }
15 |
16 | export default GenericModal;
17 |
--------------------------------------------------------------------------------
/src/utils/ui/MobileBoundary.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function MobileBoundary ({mobileWidth = 600}) {
4 | return window.innerWidth > mobileWidth && <>
5 |
8 |
12 |
9 | {props.content && props.content}
10 |
11 |
22 |
30 |
41 |
42 | }
--------------------------------------------------------------------------------
/srctest/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import MyComponent from '../src/index.js'
4 |
5 | const ParentWrapper = () => {
6 | return (
7 |
38 | ««« Not visible on phone »»»
39 |
40 |
16 |
18 | )
19 | }
20 |
21 | ReactDOM.render(