Comments (8)
Do you mean lib/codemirror.js
or the mode files (e.g. mode/txt/txt.js
, or mode/markdown/markdown.js
)?
from frontend.
I mean $GOPATH/src/github.com/filebrowser/filebrowser/node_modules/filebrowser-frontend/dist/static/js/codemirror/mode/markdown/markdown.js
from frontend.
Then, I can reproduce the issue.
It's not a problem with codemirror itself or the build process. Everything works as expected. However, modes or styles need to be explicitly added which is not done right now. Because the list is so long (https://codemirror.net/mode/index.html), I find it sensible not include any, or to include just a few.
However, I think it'd be useful to explain it in the docs or in the README, and let the user know how they can rebuild the frontend to add modes.
from frontend.
Glad to hear that.
from frontend.
@march1993 I just got it to work. Thought you might find it useful:
First, clone the backend and the frontend under the same dir:
mkdir filebrowser-hub
cd filebrowser-hub
git clone https://github.com/filebrowser/filebrowser
git clone https://github.com/filebrowser/frontend
Edit frontend/src/components/files/Editor.vue
to add the language modes you want. E.g., here I added markdown
and VHDL
.
Then, save the following block as filebrowser-hub/build_assets_in_docker.sh
:
echo 'http://dl-cdn.alpinelinux.org/alpine/edge/testing' >> /etc/apk/repositories
sed -i -e 's/v[0-9]\.[0-9]/edge/g' /etc/apk/repositories
apk add -U --no-cache yarn git
# Clean the dist folder and build the assets
cd /src/frontend
if [ -d "dist" ]; then
rm -rf dist/*
fi;
yarn install
yarn build
cd /src/filebrowser
# Install rice tool if not present
if ! [ -x "$(command -v rice)" ]; then
go get github.com/GeertJohan/go.rice/rice
fi
mkdir -p node_modules
mkdir -p node_modules/filebrowser-frontend
cp -vr /src/frontend/dist node_modules/filebrowser-frontend
# Embed the assets using rice
rice embed-go
Now, run build_assets_in_docker.sh
inside a golang:alpine
container:
docker pull golang:alpine
$(command -v winpty) docker run --rm -itv /$(pwd)://src -w //src golang:alpine sh -c "./build_assets_in_docker.sh"
Last, build the docker image:
cd filebrowser
docker build -t filebrowser/filebrowser .
And try it:
docker run -dp 5555:80 filebrowser/filebrowser --no-auth
Now you can create .md
files without errors and with proper decoration. This does not apply to .vhd
or .vhdl
sources, yet, because filebrowser/filebrowser#314 and filebrowser/filebrowser#358.
from frontend.
@1138-4EB , I don't use docker. I used build_all.sh to build the project. I edit frontend/src/components/files/Editor.vue and added the language modes. The codemirror is not copied to dist/static/js as in this thread. After I changed below webpack code, the issue was gone
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -73,7 +73,7 @@ module.exports = merge(baseWebpackConfig, {
ignore: ['.*']
},
{
-
from: path.resolve(__dirname, '../../node_modules/codemirror/mode/*/*'),
-
])
from: path.resolve(__dirname, '../node_modules/codemirror/mode/*/*'), to: path.join(config.assetsSubDirectory, 'js/codemirror/mode/[name]/[name].js') }
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -35,7 +35,7 @@ var webpackConfig = merge(baseWebpackConfig, {
ignore: ['.*']
},
{
-
from: path.resolve(__dirname, '../../node_modules/codemirror/mode/*/*'),
-
from: path.resolve(__dirname, '../node_modules/codemirror/mode/*/*'), to: path.join(config.assetsSubDirectory, 'js/codemirror/mode/[name]/[name].js'), transform: function (source, path) { let result = UglifyJS.minify(source.toString('utf8'))
from frontend.
@helloray, thanks for the hint! I am reopening this issue.
Certainly, I am not really sure about the convenience of keeping all the javascript scripts in subdir build
.
Should/can we use vue-cli-service
instead? Anyone experienced enough with both Vue.js and webpack can tell if we would loose anything by changing this?
from frontend.
We will replace Codemirror with another editor. Closing this in favour of #46
from frontend.
Related Issues (20)
- What is it doing ? HOT 2
- displaced subtitles in safari HOT 7
- Support better autofocus
- "Multiple selection enabled" is always visible HOT 1
- Dragging folder to itself issues a 500 error
- unable to share files for users with read-only permissions HOT 1
- Can't play mp4
- request to rewrite to the Angular HOT 5
- IIS ARR Rewrite? HOT 1
- Add Green Keeper after 2.0 HOT 1
- i18n on 2.0 HOT 7
- Action required: Greenkeeper could not be activated 🚨
- Action required: Greenkeeper could not be activated 🚨
- Action required: Greenkeeper could not be activated 🚨
- Add a QR code when sharing files to others? HOT 7
- Add download, rename, open... buttons on hovering over items HOT 1
- baseUrl option in vue.config.js is deprecated now, please use publicPath instead HOT 1
- Weird interaction with directory containing "#"
- I have some questions about CSS HOT 1
- source map empty HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from frontend.