Skip to content

Commit 8cf6a33

Browse files
formfcwAlexGaillard
formfcw
and
AlexGaillard
authored
Add visual-editing package (#1)
* init * add editable elements and overlay management functionality * add edit button click handler * update Form type * trim whitespace from key-value pairs in editable element parsing * refactor DirectusFrame to singleton, add receive action and key for communication * refactor EditableStore and EditableElement for static access and clean-up * add confirmation handling in scan function * add sameOrigin check in receive method for improved security * make structure of SavedData clearer * rename property to mode * add highlight functionality for overlay elements and extend receive actions * add support for popover overlays and send position/rect to Directus frame * reset the edit button styles to initial to avoid interfering with website styles * add toEditAttr helper function * refactor: rename Form type to EditConfig and update related references * add support for modal * make entire overlay element clickable when highlighted * add support for individually changing the z-index of overlay elements via CSS vars * check if window exists to prevent warnings * prevent overwriting options when elements were specified * update remove method to correctly remove the container instead of the element * update query method to select all children instead of first occurrence * allow elements parameter to accept null * refactor EditConfig to allow fields as a string or string array * ensure elements parameter is correctly evaluated as boolean * add build script to rename global IIFE output files * add test-website * update dependencies * update rename-global-iife script * update .gitignore to ignore dist folder while including global IIFE * update path to package.json in tsup.config.js * update repository URL in package.json * refactor build script to inline rename-global-iife command * extract types and refactor * build * add readme files * improve readme files * Update typo Co-authored-by: Alex Gaillard <[email protected]> * refactor: rename noDimensions to hasNoDimensions for clarity * update readmes * build * update setup instructions * fix types * rename scan function to apply for clarity * rename toEditAttr function to setAttr for improved clarity * build * update docs * update package description * update package description * refactor build script and update README for Windows compatibility * build * refactor nuxt configuration to copy visual-editing.js during build process * add shell-emulator configuration to .npmrc * update README for clarity on command usage in test-website * update test website to include 'visual' module in module_bar * Update Package Readmes (#2) * Update library readme * Update test-website readme * Delete test-website/template/pnpm-lock.yaml Remove lock file * Update readme.md Co-authored-by: Florian C. Wachmann <[email protected]> * Update readme.md Co-authored-by: Florian C. Wachmann <[email protected]> * Update readme.md Co-authored-by: Florian C. Wachmann <[email protected]> * Update readme.md Co-authored-by: Florian C. Wachmann <[email protected]> * Update readme.md Co-authored-by: Florian C. Wachmann <[email protected]> * Adjust wording * update readme * Update test-website/readme.md Co-authored-by: Alex Gaillard <[email protected]> * capitalize PHP * add link to docs for Docker installation --------- Co-authored-by: Florian C. Wachmann <[email protected]> * fix wrong link --------- Co-authored-by: Alex Gaillard <[email protected]>
1 parent 2d59ad1 commit 8cf6a33

File tree

273 files changed

+50341
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

273 files changed

+50341
-0
lines changed

‎.editorconfig‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
root=true
2+
3+
[*]
4+
end_of_line = lf
5+
insert_final_newline = true
6+
charset = utf-8
7+
trim_trailing_whitespace = true
8+
9+
[*.{mjs,cjs,js,mts,cts,ts,json,vue,html,scss,css,toml,md}]
10+
indent_style = tab
11+
12+
[*.md]
13+
trim_trailing_whitespace = false
14+
15+
[*.{yml,yaml}]
16+
indent_style = space

‎.gitignore‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# User preferences
2+
.DS_Store
3+
4+
# Dependencies
5+
node_modules/
6+
7+
# Builds / Caches
8+
*.tsbuildinfo
9+
**/.vitepress/cache/
10+
**/.vitepress/.temp/
11+
.eslintcache
12+
13+
# Dotenv configs
14+
.env
15+
.env.*
16+
17+
# Logs
18+
npm-debug.log
19+
debug
20+
.clinic
21+
22+
# IDEs / Editors
23+
.devcontainer/
24+
.vscode/*
25+
!.vscode/extensions.json
26+
.idea/
27+
*.code-workspace
28+
*.sublime-settings
29+
.*.swp
30+
31+
# Environments / Workspaces
32+
.gitpod.yml
33+
.netlify
34+
35+
# Temporary files
36+
TODO
37+
38+
# Ignore dist folder but include the global IIFE
39+
dist/*
40+
!dist/visual-editing.js

‎.npmrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
engine-strict=true
2+
shell-emulator=true
3+
save-prefix=''

‎.prettierignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
dist/
2+
pnpm-lock.yaml
3+
**/.vitepress/cache/
4+
/.changeset/pre.json
5+
/.changeset/*.md

‎.prettierrc.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"$schema": "http://json.schemastore.org/prettierrc",
3+
"printWidth": 120,
4+
"singleQuote": true,
5+
"proseWrap": "always",
6+
"htmlWhitespaceSensitivity": "ignore",
7+
"overrides": [
8+
{
9+
"files": "docs/**/*.md",
10+
"options": {
11+
"embeddedLanguageFormatting": "off"
12+
}
13+
}
14+
]
15+
}

‎dist/visual-editing.js‎

Lines changed: 68 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎eslint.config.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
// @ts-check
2+
3+
import eslintJs from '@eslint/js';
4+
import eslintConfigPrettier from 'eslint-config-prettier';
5+
import eslintPluginVue from 'eslint-plugin-vue';
6+
import globals from 'globals';
7+
import process from 'node:process';
8+
import typescriptEslint from 'typescript-eslint';
9+
10+
export default typescriptEslint.config(
11+
// Global config
12+
{
13+
languageOptions: {
14+
ecmaVersion: 2023,
15+
sourceType: 'module',
16+
globals: {
17+
...globals.browser,
18+
...globals.node,
19+
},
20+
},
21+
},
22+
23+
// Enable recommended rules for JS files
24+
eslintJs.configs.recommended,
25+
26+
// Custom basic rules
27+
{
28+
rules: {
29+
// No console & debugger statements in production
30+
'no-console': process.env.NODE_ENV !== 'development' ? 'error' : 'off',
31+
'no-debugger': process.env.NODE_ENV !== 'development' ? 'error' : 'off',
32+
// Require empty line between certain statements
33+
'padding-line-between-statements': [
34+
'error',
35+
{
36+
blankLine: 'always',
37+
prev: [
38+
'block',
39+
'block-like',
40+
'cjs-export',
41+
'class',
42+
'export',
43+
'import',
44+
'multiline-block-like',
45+
'multiline-const',
46+
'multiline-expression',
47+
'multiline-let',
48+
'multiline-var',
49+
],
50+
next: '*',
51+
},
52+
{
53+
blankLine: 'always',
54+
prev: ['const', 'let'],
55+
next: ['block', 'block-like', 'cjs-export', 'class', 'export', 'import'],
56+
},
57+
{
58+
blankLine: 'always',
59+
prev: '*',
60+
next: ['multiline-block-like', 'multiline-const', 'multiline-expression', 'multiline-let', 'multiline-var'],
61+
},
62+
{ blankLine: 'any', prev: ['export', 'import'], next: ['export', 'import'] },
63+
],
64+
// Require empty line between class members
65+
'lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: true }],
66+
// Disallow nested ternary expressions
67+
'no-nested-ternary': 'error',
68+
// Require brace style for multi-line control statements
69+
curly: ['error', 'multi-line'],
70+
// Disallow expressions where the operation doesn't affect the value
71+
'no-constant-binary-expression': 'error',
72+
},
73+
},
74+
75+
// Enable TypeScript plugin and recommended rules for TypeScript files
76+
...typescriptEslint.configs.recommended,
77+
78+
// Enable Vue plugin and recommended rules for Vue files
79+
...eslintPluginVue.configs['flat/recommended'],
80+
{
81+
files: ['**/*.vue'],
82+
languageOptions: { parserOptions: { parser: typescriptEslint.parser } },
83+
// Apply recommended TypeScript rules to Vue files as well
84+
// @ts-expect-error wrong type assertion
85+
rules: typescriptEslint.configs.recommended.reduce((rules, config) => ({ ...rules, ...config.rules }), {}),
86+
},
87+
88+
// Custom TypeScript rules
89+
{
90+
files: ['**/*.{ts,vue}'],
91+
rules: {
92+
// Allow unused arguments and variables when they begin with an underscore
93+
'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
94+
// Allow ts-directive comments (used to suppress TypeScript compiler errors)
95+
'@typescript-eslint/ban-ts-comment': 'off',
96+
// Allow usage of the any type (consider enabling this rule later on)
97+
'@typescript-eslint/no-explicit-any': 'off',
98+
},
99+
},
100+
101+
// Custom Vue rules
102+
{
103+
files: ['**/*.vue'],
104+
rules: {
105+
// Same ordering of component tags everywhere
106+
'vue/component-tags-order': [
107+
'error',
108+
{
109+
order: ['script', 'template', 'style'],
110+
},
111+
],
112+
// Require empty line between component tags
113+
'vue/padding-line-between-blocks': 'error',
114+
// Allow single word component names ("Example" instead of "MyExample")
115+
'vue/multi-word-component-names': 'off',
116+
// Don't require default value for props that are not marked as required
117+
'vue/require-default-prop': 'off',
118+
// Require shorthand form attribute when v-bind value is true
119+
'vue/prefer-true-attribute-shorthand': 'error',
120+
// Allow unused variables when they begin with an underscore
121+
'vue/no-unused-vars': ['error', { ignorePattern: '^_' }],
122+
},
123+
},
124+
125+
// Test files
126+
{
127+
files: ['**/*.test.ts'],
128+
rules: {
129+
'vue/one-component-per-file': 'off',
130+
},
131+
},
132+
133+
eslintConfigPrettier,
134+
);

‎package.json‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "@directus/visual-editing",
3+
"version": "1.0.0",
4+
"description": "Visual editing library to enable in-place editing of your website’s frontend from within the Visual Editor in Directus",
5+
"homepage": "https://directus.io",
6+
"repository": {
7+
"type": "git",
8+
"url": "https://github.com/directus/visual-editing.git"
9+
},
10+
"funding": "https://github.com/directus/directus?sponsor=1",
11+
"license": "MIT",
12+
"type": "module",
13+
"exports": {
14+
".": {
15+
"import": "./dist/index.js",
16+
"require": "./dist/index.cjs"
17+
},
18+
"./package.json": "./package.json"
19+
},
20+
"main": "./dist/index.js",
21+
"files": [
22+
"dist"
23+
],
24+
"scripts": {
25+
"dev": "NODE_ENV=development tsup",
26+
"build": "NODE_ENV=production tsup",
27+
"test": "vitest --typecheck --watch=false"
28+
},
29+
"dependencies": {
30+
"@reach/observe-rect": "1.2.0"
31+
},
32+
"devDependencies": {
33+
"@directus/tsconfig": "3.0.0",
34+
"@eslint/js": "9.21.0",
35+
"eslint": "9.21.0 ",
36+
"eslint-config-prettier": "10.0.2",
37+
"eslint-plugin-vue": "9.32.0",
38+
"globals": "16.0.0",
39+
"prettier": "3.5.2",
40+
"tsup": "8.4.0",
41+
"typescript": "5.8.2",
42+
"typescript-eslint": "8.25.0",
43+
"vitest": "3.0.7"
44+
},
45+
"engines": {
46+
"node": ">=22"
47+
}
48+
}

0 commit comments

Comments
 (0)