Hugging Face's logo

Spaces:
DMTuit
/
psy_vk2
Sleeping

App Files Community
DmitrMakeev commited on
Commit
04760db
·
verified ·
1 Parent(s): 5a8ce60

Update builder.html

Browse files
Files changed (1) hide show
  1. builder.html +31 -90
builder.html CHANGED
@@ -6,41 +6,6 @@
6
  <title>GrapesJS Example</title>
7
  <!-- GrapesJS CSS -->
8
  <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
9
-
10
- <!-- Your Custom CSS -->
11
- <style>
12
- /* Default styles */
13
- .gjs-row {
14
- display: flex;
15
- justify-content: space-between;
16
- border: 1px solid #ccc;
17
- padding: 10px;
18
- text-align: center;
19
- min-height: 50px;
20
- }
21
- .gjs-cell {
22
- border: 1px solid #ccc;
23
- padding: 10px;
24
- text-align: center;
25
- min-height: 50px;
26
- }
27
-
28
- /* Working styles */
29
- .gjs-row-working {
30
- display: flex;
31
- justify-content: space-between;
32
- border: 2px solid #ff0000; /* Red border for working style */
33
- padding: 10px;
34
- text-align: center;
35
- min-height: 50px;
36
- }
37
- .gjs-cell-working {
38
- border: 2px solid #0000ff; /* Blue border for working style */
39
- padding: 10px;
40
- text-align: center;
41
- min-height: 50px;
42
- }
43
- </style>
44
  </head>
45
  <body>
46
  <div id="gjs"></div>
@@ -49,66 +14,42 @@
49
  <script src="https://unpkg.com/grapesjs"></script>
50
  <!-- Your Custom JS -->
51
  <script>
52
- // Initialize GrapesJS editor
53
  const editor = grapesjs.init({
54
- container: '#gjs', // Container element for the editor
55
- fromElement: true, // Initialize from existing HTML content
56
- height: '100vh', // Full viewport height
57
- storageManager: { type: 0 }, // Disable storage manager
58
- plugins: [], // No plugins for now
59
- pluginsOpts: {}, // No plugin options
60
- styleManager: {
61
- sectors: [
62
- {
63
- name: 'Dimensions',
64
- properties: [
65
- {
66
- type: 'number',
67
- label: 'Width',
68
- property: 'width',
69
- units: ['px', '%'],
70
- min: 0,
71
- default: '300px', // Default width
72
- },
73
- {
74
- type: 'number',
75
- label: 'Height',
76
- property: 'height',
77
- units: ['px', '%'],
78
- min: 0,
79
- default: '80px', // Default height
80
- },
81
- ],
82
- },
83
- ],
84
  },
85
  });
86
 
87
- // Add a block with default styles
88
- const blockManager = editor.BlockManager;
89
- blockManager.add('horizontal-block-default', {
90
- label: 'Horizontal Block (Default)',
91
- content: `
92
- <div class="gjs-row">
93
- <div class="gjs-cell"></div>
94
- <div class="gjs-cell"></div>
95
- <div class="gjs-cell"></div>
96
- </div>
97
- `,
98
- attributes: { class: 'gjs-block-section' }
99
- });
100
 
101
- // Add a block with working styles
102
- blockManager.add('horizontal-block-working', {
103
- label: 'Horizontal Block (Working)',
104
- content: `
105
- <div class="gjs-row-working">
106
- <div class="gjs-cell-working"></div>
107
- <div class="gjs-cell-working"></div>
108
- <div class="gjs-cell-working"></div>
109
- </div>
110
- `,
111
- attributes: { class: 'gjs-block-section' }
 
 
 
 
 
 
 
 
 
 
 
112
  });
113
  </script>
114
  </body>
 
6
  <title>GrapesJS Example</title>
7
  <!-- GrapesJS CSS -->
8
  <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </head>
10
  <body>
11
  <div id="gjs"></div>
 
14
  <script src="https://unpkg.com/grapesjs"></script>
15
  <!-- Your Custom JS -->
16
  <script>
 
17
  const editor = grapesjs.init({
18
+ container: '#gjs',
19
+ fromElement: true,
20
+ height: '100vh',
21
+ storageManager: { type: 0 },
22
+ plugins: [],
23
+ pluginsOpts: {},
24
+ selectorManager: {
25
+ componentFirst: true,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  },
27
  });
28
 
29
+ const domc = editor.DomComponents;
 
 
 
 
 
 
 
 
 
 
 
 
30
 
31
+ domc.addType('component-css', {
32
+ model: {
33
+ defaults: {
34
+ attributes: { class: 'cmp-css' },
35
+ components: `
36
+ <span>Component with styles<span>
37
+ <div class="cmp-css-a">Component A</div>
38
+ <div class="cmp-css-b">Component B</div>
39
+ `,
40
+ styles: `
41
+ .cmp-css { color: red }
42
+ .cmp-css-a { color: green }
43
+ .cmp-css-b { color: blue }
44
+
45
+ @media (max-width: 992px) {
46
+ .cmp-css{ color: darkred; }
47
+ .cmp-css-a { color: darkgreen }
48
+ .cmp-css-b { color: darkblue }
49
+ }
50
+ `,
51
+ },
52
+ },
53
  });
54
  </script>
55
  </body>