Giter Site home page Giter Site logo

Comments (8)

eine avatar eine commented on May 14, 2024

Do you mean lib/codemirror.js or the mode files (e.g. mode/txt/txt.js, or mode/markdown/markdown.js)?

from frontend.

march1993 avatar march1993 commented on May 14, 2024

I mean $GOPATH/src/github.com/filebrowser/filebrowser/node_modules/filebrowser-frontend/dist/static/js/codemirror/mode/markdown/markdown.js

from frontend.

eine avatar eine commented on May 14, 2024

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.

march1993 avatar march1993 commented on May 14, 2024

Glad to hear that.

from frontend.

eine avatar eine commented on May 14, 2024

@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.

helloray avatar helloray commented on May 14, 2024

@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.

eine avatar eine commented on May 14, 2024

@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.

hacdias avatar hacdias commented on May 14, 2024

We will replace Codemirror with another editor. Closing this in favour of #46

from frontend.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.